Q&A
とりあえず playground 用に転記しいましたが、この動作であっていますでしょうか？ https://livecodes.io/?x=id/4vemnzn8ecx
テキストとテキストが重なる場合の対処方を教えてください
画像とテキストを横並びに2行配置していますが、テキストが画像の枠（高さ）heightを超えると
次の項目のテキストにかぶさってしまいます
以下試してみましたがダメでした。
max-height: 280px;指定
<br>を末尾に記述
次の項目のテキストにかぶさらないようにする方法があれば教えてください
よろしくお願いします
<style>
.flex {
max-width: 960px;
margin: 20px auto;
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.flex .right {
max-width: 460px;
max-height: 280px;
margin: 0.5em 0em 0em 1.5em;
}
.flex img {
width: 100%;
height: 100%;
}
.flextext {
font-size: 1.8rem;
letter-spacing: 0.1em;
word-spacing: 0.2em;
}
</style>
<div class="flex">
<a href=""><img class="image" src="" alt="" title=""></a>
<div class="right">
<h3><strong>タイトル</strong></h3>
<p class="flextext">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="flextext">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p><br>
</div>
</div>
<div class="flex">
<a href=""><img class="image" src="" alt="" title=""></a>
<div class="right">
<h3><strong>タイトル</strong></h3>
<p class="flextext">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="flextext">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p>
<p class="flextext">テキストテキストテキスト</p><br>
</div>
</div>
追記します
記載しているコードは必須ではありません
目標は以下の通りです
1，画像とテキスト横並びにしたものを複数設置したい
2，レスポンシブデザインに対応し、画面が小さいくなれば画像とテキストが縦に並ぶ
3，メディアクエリを使わない
上記に加えて今回の問題
次の項目のテキストにかぶさらないようにすることです
何卒宜しくお願い致します
ご返答いただきありがとうございます
はいあっています
質問文を書くとき、HTMLソースの最初の前に「```html」という行を、最後の次に「```」という行を追加してください。各行を ` ` で囲む必要はありません。
max-height: 280px; をむしろ指定しなければ治るのでは？
大抵は高さが指定されていて、その枠に入り切ってないのではみ出すのだと思われます
> 次の項目のテキストにかぶさらないようにすることです
はみ出るほどテキストがあった場合、「どんなレイアウトにしたい」のでしょうか。
ほしい結果を図示してください
回答2件
0
ベストアンサー
以下試してみましたがダメでした。
max-height: 280px;指定
逆にこれが指定してあるから重なるのでは。
これを削除すれば重ならないです。
ただし、テキスト量にあわせて高さが拡張するので、画像が縦にその分伸びます。
それが、いやなら、画像の height: 100%; を削除すればいいでしょう。
css
1.flex img { 2 width: 100%; 3 /* height: 100%; これを削除 */ 4}
その代わり画像のしたに空白があきます。
max-height: 280px; が必須なら、yambejpさんの回答のようにoverflow:hidden;ではみ出した部分を非表示にするしかないでしょう。
投稿2025/03/18 12:57
編集2025/03/18 15:21
総合スコア34292
回答ありがとうございます。試してみましたが解決できませんでした。
ご回答ありがとうございます。
max-height: 280px;は必須ではありません
はみ出した部分を非表示にすることは本末転倒です
宜しくお願い致します
回答にCodePenサンプルサンプルを追加したので、それが想定と違うなら、
どの部分が違っていて、どのようにしたいのか具体的に説明してください。
hatena19様
ご連絡ありがとうございます
確認しました
問題なく表示できるようになりました
心から感謝申し上げます。
本当にありがとうございます
0
溢れているのですからそういうものでしょう
逆にどうしたいのでしょうか？
とりあえず溢れたら消したいなら
css
1.flex{ 2overflow:hidden; 3}
のを記載すれば重なることはなくなります。
ちなみにグリッドレイアウトを採用するなら「flex」というクラスで処理するのは紛らわしいのでやめた方がいいです。
投稿2025/03/18 08:16
総合スコア117413
あなたの回答
tips
プレビュー
