HTML里div的嵌套。

6回答

韩棠

威威威威

一朵大白天

<!DOCTYPE html> <html> <head> <title>HTML里div的嵌套</title> <style type="text/css"> .div,.div1,.div2,.div3{ margin:10px; border:1px solid #000; } .div{ width: 300px; height:230px; } .div1{ width: 100px; height: 200px; float: left; } .div2{ height: 100px; width: 145px; float: left; } .div3{ width: 145px; height: 80px; float: left; } </style> </head> <body> <div class='div'> <div class='div1'></div> <div class='div2'></div> <div class='div3'></div> </div> </body> </html>

Sky_shine

GavinZeng

实现思路：div内部，div1 左浮动，div2和div3右浮动。然后为了不干涉其他元素要清除浮动参考代码：CSS部分：.div{ width: 300px; height: 300px; border: 1px solid black; padding: 10px; } .div1{ width: 100px; height: 300px; float: left; border: 1px solid black; margin-right: 10px; } .div2{ width: 184px; min-height: 144px; border: 1px solid black; margin-bottom: 10px; float: right; } //清除浮动，这里使用了伪类:after .div1:after,div2:after{ content:""; display: block; clear: both; overflow: hidden; }HTML部分：<div class="div"> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div2">div3</div> </div>

慕渣渣

可以用浮动布局。记得清除浮动，也就是在浮动元素的父元素上加一个清除的类，一般是clearfix，当然clearfix怎么写可以上网查。