Rumah >hujung hadapan web >html tutorial >请教:div双列布局问题_html/css_WEB-ITnose
div双列布局,外层width:500px;左列width:100px,右列width:100%;margin-left:150px;
预览效果为右列实际大小超出了外层div。
请教如何实现右列不超出外层div范围(要求不使用js,实际应用中外层会捕获window.resize()灵活指定宽度)。
<!doctype html><html><head><style type="text/css">.div1{ border: 1px solid black; width:500px;}.div2{ width:100px; border: 1px solid blue; float:left; height:200px;}.div3{ width:100%; border: 1px solid red; margin-left:102px; height:200px;}</style></head><body> <div class="div1"> <div class="div2">div2</div> <div class="div3">div3</div> </div></body></html>
.div3{ border: 1px solid red; margin-left:102px; height:200px;}