ホームページ > ウェブフロントエンド > htmlチュートリアル > 質問: div 2 列レイアウト問題_html/css_WEB-ITnose

質問: div 2 列レイアウト問題_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:07:32
オリジナル
1352 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート