四种方法实现两边固定，中间自适应布局(浮动定位)

最新推荐文章于 2022-08-22 23:23:39 发布

置顶

美果儿

最新推荐文章于 2022-08-22 23:23:39 发布

阅读量3.5k

点赞数 2

本文链接：https://blog.csdn.net/guohuanyumeiguoer/article/details/78611086

版权

只利用浮动左右浮动

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title>利用浮动实现两边固定中间自适应布局</title>
<style>
html,body{
height: 100%;
margin: 0;
min-width: 800px;
}
#left{
float: left;
width: 200px;
height: 80px;
background: blue;
color: pink;
line-height: 80px;
text-align:center;
font-weight: bold;
}
#right{
float: right;
width:200px;
height: 80px;
background: blue;
color: pink;
line-height: 80px;
text-align:center;
font-weight: bold;
}
#center{
height: 80px;
margin: 0 250px;
background: pink;
color: blue;
line-height: 80px;
text-align:center;
font-weight: bold;
}
</style>
</head>
<body>
<div id="left">左左左</div>
<div id="right">右右右</div>
<div id="center">中中中</div>
</body>

</html>

只利用定位

<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

美果儿

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
四种方法实现两边固定，中间自适应布局(浮动定位)

只利用浮动左右浮动&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;利用浮动实现两边固定中间自适应布局&lt;/title&gt;&lt;style&gt;html,body{height: 100%;margin: 0;min-width: 800p
复制链接

扫一扫