左右定宽中间自适应布局

最新推荐文章于 2024-08-24 21:17:20 发布

转载最新推荐文章于 2024-08-24 21:17:20 发布 · 66 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chuanzhi946/p/6818746.html

本文介绍了一种使用HTML和CSS实现的三栏布局方案，左栏和右栏宽度固定并互不遮挡，中栏自适应剩余宽度。通过浮动定位及负边距的应用，实现了简洁且兼容性良好的网页布局。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

.left {
float: left;
width: 200px;
height: 200px;
background-color: red;
margin-right: -200px;
}

.middle {
float: left;
width: 100%;
}

.middle-content {
height: 200px;
margin-left: 200px;
margin-right: 200px;
background-color: yellow;
}

.right {
float: right;
width: 200px;
height: 200px;
background-color: blue;
margin-left: -200px;
}
</style>
</head>

<body>
<div class="left"></div>
<div class="middle">
<div class="middle-content"></div>
</div>
<div class="right"></div>
</body>

</html>

转载于:https://www.cnblogs.com/chuanzhi946/p/6818746.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。