基本上,如果您查看 http://drugraid.3owl.com你可以看到他们有一个横幅,当你调整网页大小时,中间栏始终保持居中,而侧横幅慢慢地爬到中心。这是我到目前为止的代码。如果有人帮助我,那就太好了。
<!--HTML CODE-->
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Testing layouts</title>
</head>
<body>
<div id="wrapper">
<div id="left">1 TEST</div>
<div id="middle">2 TEST</div>
<div id="right">3 TEST</div>
</div>
</body>
</html>
CSS 代码
body {
margin: 0px;
}
#wrapper {
height: 35px;
padding-top: 2px;
padding-left: 2px;
padding-right: 2px;
min-width: 900px;
}
#left {
background-color: #ADA5A1;
height: 35px;
width: 16%;
float: left;
}
#middle {
background-color: #7D726D;
height: 35px;
width: 68%;
float: left;
}
#right {
background-color: #ADA5A1;
height: 35px;
width: 16%;
float: left;
}
此外,如果您有时间,您可以尝试使用... 2px 的边距,这样框的间距为 2px;彼此相邻
最佳答案
尝试只以一个容器为中心
http://codepen.io/gcyrillus/pen/IdrGa
#maincontainer {
min-height:100%;
width:60%;
min-width:600px;
margin:auto;
}
关于html - 创建一个 3 列横幅,当浏览器调整大小时是动态的,在最小宽度之后它以中间列为中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17478919/