ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV を単独で伸縮させるにはどうすればよいですか? _html/css_WEB-ITnose
DIV を単独で伸縮させるにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:47:451389ブラウズ
<div style=" width:810px; background-color:#06F; min-height:210px;word-wrap:break-word;"> <div style="width:200px; height:200px; background-color:#0F0; float:left;">1</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">2</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">3</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">4</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">5</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">6</div> </div>
外側の大きな DIV は自動的に高さを伸縮させ、内側の小さな DIV はデータベースを使用します。その数は必ずしも確実ではなく、多かれ少なかれある可能性があります。
ディスカッションに返信（解決策）
外側にスタイルを追加
overflow:hidden
高さを設定しなくても大丈夫です min-height を削除してみてはいかがでしょうか。
<div style=" width:810px; background-color:#06F; min-height:210px;word-wrap:break-word;"> <div style="width:200px; height:200px; background-color:#0F0; float:left;">1</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">2</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">3</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">4</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">5</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">6</div> <div style="clear:both;"></div> </div>
最後に div を追加してフローティング クリアを実行しないと、親要素が自動的に適応されません。
<div style=" width:810px; background-color:#06F; min-height:210px;word-wrap:break-word;"> <div style="width:200px; height:200px; background-color:#0F0; float:left;">1</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">2</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">3</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">4</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">5</div> <div style="width:200px; height:200px; background-color:#0F0; float:left;">6</div> <div style="clear:both;"></div> </div>
最後に div を追加してフローティング クリアを実行しないと、親要素が自動的に適応されません。
なぜこれをこするのですか？ ? ?
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。