在页脚中有 4 个小框(由周围有红色边框的 div 创建)，它们都需要在重新调整大小时响应浏览器窗口的宽度。无论窗口大小如何，它们都需要居中并且彼此之间的空间百分比相等。
像这样:http://s7.postimg.org/tvmmw91jf/theboxes.png
fiddle :http://jsfiddle.net/NightSpark/1L5027qr/
#footer {
width: 100%;
clear: both;
text-align: center;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}<body>
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
<div>
</body>更新:我在上面放了一个比我一开始看到的更清楚的插图。
最佳答案
使元素居中的最简单方法是使用 CSS Flexbox。
这是 HTML :
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
</div>
这是 CSS:
#footer {
display: flex;
flex-direction: row;
justify-content: space-between;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
这是一个 fiddle :http://jsfiddle.net/1L5027qr/1/
关于html - 制作一个内部有小 div 框的页脚以响应浏览器窗口的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27513977/