Q&A
ベストアンサー
ありがとうございます。
overflow:hidden;
で対応出来そうなのでそれで対応してみます……
floatした場合は高さ維持出来ないのをお教え頂き感謝します。
もう本当に申し訳ございません。
自分の考えが悪いのかと思い
問い合わせ失礼します。
css
1.right{ 2 float: right; 3} 4.left{ 5 float: left; 6} 7.waku{ 8 border: medium solid #ff00ff; 9}
html
1<div class="waku"> 2<div style="width: 500px; text-align: left;" class="left"; > 3いええええええええええええええい 4</div> 5<div class="right"> 6<img src="ikezaki.jpg"> 7</div> 8</div>
としても
html
1==================================================== 2いえええええええええい [池崎の画像]
と上部になってしまいます……
入れ子のdiv全部に枠をかけることは出来ないのでしょうか？
初心者の質問失礼しますが上記お問い合わせいたします。
回答3件
0
floatについて学習中であるというわけでなく、IEを無視していいなら、無理にfloatを使わずともflexboxを使えばかなりシンプルにできます。
<!DOCTYPE html> <HTML lang="ja"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .waku { display: flex; justify-content: space-between; border: medium solid #ff00ff; } </style> </head> <body> <div class="waku"> <div style="width: 500px; text-align: left;" class="left" ;> いええええええええええええええい </div> <div class="right"> <img src="ikezaki.jpg"> </div> </div> </body> </html>
投稿2018/01/18 09:49
編集2018/01/18 09:49
退会済みユーザー
総合スコア0
0
質問の意味を間違えているかも知れませんが、
入れ子のdiv全部に枠をかける･･･
これは、divのクラス「left・right」に枠（border）をそれぞれ個別で付けるのでしょうか？であれば、それぞれのCSS「left・right」にborderの指定を記入すれば良いと思います。
そうでなく、divのクラス「waku」の枠（border）を表示させたいのであれば、入れ子をfloatする場合、親には高さが必要となります。
現状は親に高さが無い為、潰れてしまい親の上下の枠線のみが表示されている状態で、入れ子のクラス「left・right」がハミ出している状態です。
各divの背景に違う色を付けて、親にあたるクラス「waku」に適当な高さを指定して確認して見ると理解しやすいかも知れません。
投稿2018/01/19 00:18
総合スコア3523
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。