html - 创建一个 3 列横幅,当浏览器调整大小时是动态的,在最小宽度之后它以中间列为中心

标签 html css layout dynamic banner

基本上,如果您查看 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/

相关文章:

html - 为什么 CSS float 不遵循 CSS3 列?

html - 移动 li 文本但不移动列表类型图像

android - 底部工具栏布局

android - 对于只计划使用一个屏幕的布局,仅使用 LinearLayout 是一种好的做法吗?

html - 负边距删除静态 sibling 的背景属性

javascript - 如何在顶部的 HTML <select> 中显示所选项目

php - WP archive.php 不起作用

CSS:变换原点

html - 以正确的方式填充背景

css - 如何删除 slider 和导航之间的空白区域?