Question

在页脚中有4个小方框（使用div围绕它们创建红色边框），并且在重新调整大小时，它们都需要响应浏览器窗口的宽度。无论窗口大小如何，它们都需要居中并且在彼此之间具有相等的百分比空间。

像这样：http://s7.postimg.org/tvmmw91jf/theboxes.png

小提琴：http://jsfiddle.net/NightSpark/1L5027qr/

＆＃13;

#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;
}

＆＃13;

<body>
<div id="footer">
	<div id="fbox1">
	</div>
	<div id="fbox2">
	</div>
	<div id="fbox3">
	</div>
	<div id="fbox4">
	</div>
<div>
</body>

＆＃13;

更新：我在上面的插图比我最初的插图更清晰。

Answer 1

使用 CSS Flexbox ，您可以做的最简单的事情就是使用 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;
}

这是一个小提琴：http://jsfiddle.net/1L5027qr/1/

Answer 2

您可以在每个div周围创建25％的宽度。

<div id="footer">
  <div style="width:25%;display:inline-block;text-align:center;">
    <div id="fbox1">
    </div>
  </div><div style="width:25%;display:inline-block;text-align:center;">
    <div id="fbox2">
    </div>
  </div><div style="width:25%;display:inline-block;text-align:center;">
    <div id="fbox3">
    </div>
  </div><div style="width:25%;display:inline-block;text-align:center;">
    <div id="fbox4">
    </div>
  </div>
</div>

Answer 3

如果您能够稍微修改标记：

<div id="footer">
    <div id="fbox1" class="outer">
        <div class="inner">...</div>
    </div>
    <div id="fbox2" class="outer">
        <div class="inner">...</div>
    </div>
    <div id="fbox3" class="outer">
        <div class="inner">...</div>
    </div>
    <div id="fbox4" class="outer">
        <div class="inner">...</div>
    </div>
<div>

CSS：

#footer {
    width: 100%;
    clear:both;
}
#footer .outer {
    width: calc(100% / 4 - 4px);
    text-align: center;
    display: inline-block;
    margin: 0px;
    border: 0px;
}
#footer .inner {
    border: 5px outset #ea2f2f;
    width: 100px;
    height: 100px;
    display: inline-block;
}

小提琴：http://jsfiddle.net/simbunch/wcvb88yg/

根据浏览器窗口的大小制作一个内部有小div框的页脚

3 个答案: