首页 >web前端 >html教程 >请教:div双列布局问题_html/css_WEB-ITnose

请教:div双列布局问题_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 12:07:321357浏览

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;}

width:100%;去掉

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn