Question

我正在尝试创建四个显示在浏览器中间的灰色方块。

每个正方形设置为40像素宽，边框为10像素。

我在box_container中使用<div>类来允许一些CSS将四个框居中。

如果我将box_container类的宽度设置为240px，则只有3个框适合第一行。

我需要将宽度设置为250px最小值，以便将所有四个框显示在一行中。为什么当10px的8个边框和40px的4个img盒子加起来为240px（10px * 8 + 40px * 40 = 240px）时呢？

<style type="text/css">

.boxes {
	height: 40px;
	width: 40px;
	background-color: gray;
	margin: 10px 10px 10px 10px;
}

.box_container {
	width: 250px;
	margin: 0 auto;
}
</style>

	<div class="box_container">
		<img class="boxes"></img>
		<img class="boxes"></img>
		<img class="boxes"></img>
		<img class="boxes"></img>
	</div>

Answer 1

这是因为您的图片代码之间有空格。没有一个很好的解决方案，但有几种方法可以解决它：

不使用空格：

<div class="box_container"><img class="boxes"><img class="boxes"><img class="boxes"><img class="boxes"></div>

或使用空注释：

<div class="box_container"><!--
    --><img class="boxes"><--
    --><img class="boxes"><--
    --><img class="boxes"><--
    --><img class="boxes"><--
--></div>

在您的情况下可能有效的另一个选项是将图像设置为float：

.boxes {
    height: 40px;
    width: 40px;
    background-color: gray;
    margin: 10px 10px 10px 10px;
    float: left
}

*此外，如果您不使用xhtml，则不应该有结束</img>标记。我在上面的示例中删除了它们，因为您的标记表明您使用的是html。从技术上讲，我不是100％肯定你为什么要使用图像，因为你只想要灰盒子。我建议使用显示为内联块的div，如下所示：

.boxes {
  height: 40px;
  width: 40px;
  background-color: gray;
  margin: 10px 10px 10px 10px;
  display: inline-block;
  float: left
}
.box_container {
  width: 250px;
  margin: 0 auto;
}

<div class="box_container">
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
</div>

Answer 2

在float:left班级

中使用.boxes

＆＃13;

.boxes {
	height: 40px;
	width: 40px;
	background-color: gray;
	margin: 10px 10px 10px 10px;
        float: left;
}

.box_container {
	width: 250px;
	margin: 0 auto;
}

＆＃13;

	<div class="box_container">
		<img class="boxes"></img>
		<img class="boxes"></img>
		<img class="boxes"></img>
		<img class="boxes"></img>
	</div>

＆＃13;

Answer 3

你的计算并不完全符合这种方式。每个<img>标记之间都有空格，这可能会导致它溢出容器。

您可以通过在CSS中使用float: left来删除此空白。

结果代码显示同一行中的四个框：

＆＃13;

<style type="text/css">

.boxes {
	height: 40px;
	width: 40px;
	background-color: gray;
	margin: 10px 10px 10px 10px;
        float: left
}

.box_container {
	width: 250px;
	margin: 0 auto;
}
</style>

	<div class="box_container">
		<img class="boxes"></img>
		<img class="boxes"></img>
		<img class="boxes"></img>
		<img class="boxes"></img>
	</div>

＆＃13;

CSS所需的像素宽度比我预期的长10px。为什么呢？

3 个答案: