Heim >Web-Frontend >HTML-Tutorial >请教:div双列布局问题_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:07:321353Durchsuche

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%;去掉

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn