两种方法实现3列布局（两端固定宽度，中间自适应）

最新推荐文章于 2021-07-26 15:55:16 发布

转载最新推荐文章于 2021-07-26 15:55:16 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/mtime/blog/608593

文章标签：

#移动开发

本文介绍了两种网页布局的方法：一种使用浮动元素实现并排显示；另一种利用绝对定位实现元素的精确位置控制。通过这两种方法，可以有效地解决网页布局中常见的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

第一种方法：

<div id="head">head</div>
		<div id="wrap">
			<div id="diva">diva</div>
			<div id="divc">divc</div> <!--注意divc在divb的前面-->
			<div id="divb">divb</div>
	    </div>
		<div id="foot">foot</div>

#head{height: 35px;
background: #ccc;}
#diva{width: 100px;
background: red;
height: 30px;
float: left;}
#divb{
height: 30px;
background: green;
margin 0 100px;
}
#divc{height: 30px;
width: 100px;
background: yellow;
float:right;
}
#foot{height: 35px;
background: #eee;}

第二种方法：

<div id="head">head</div>
		<div id="wrap">
			<div id="diva">diva</div>
			<div id="divb">divb</div>
			<div id="divc">divc</div>
	    </div>
		<div id="foot">foot</div>

#wrap{position: relative;}
#diva{width: 100px;
background: red;
height: 30px;
position: absolute;
left: 0;
}
#divb{
height: 30px;
background: green;
margin 0 100px;
}
#divc{height: 30px;
width: 100px;
background: yellow;
position: absolute;
right: 0;
}
#foot{height: 35px;
background: #eee;}

转载于:https://my.oschina.net/mtime/blog/608593