HTML里div的嵌套。
要想做这样一个盒子怎么写？
div{width：1000px;height:600px;}
div1{width:300px;height:550px;float:left;}?
慕粉3847971浏览 4966回答 6
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
<div class="row"> <div class="div1"><div> <div> <div class="div2"></div> <div class="div3"></div> </div> </div> -
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怎么写可以上网查。
随时随地看视频慕课网APP
Html/CSS