Question

我有以下HTML：

 <div class="top_buttons">

    <div class="top_button">
        <img src="img/image1.png">
    </div>

    <div class="top_button">
        <a href="#">
            <img src="img/image2.png">
        </a>
    </div>

    <div class="top_button">
        <a href="#">
            <img src="img/image3.png">
        </a>
    </div>

</div>

以下CSS完美运行：

.top_buttons{

    width: 100%;
    height: auto;

    margin: 0 auto;

    overflow: hidden;
}

 .top_button{

     float: left;
     width: 33.333%;/*Because I have 3 images with the same width, I want each to have 1/3 of the total width space available (mobile website)*/
 }

当我想为内部div（即图像的父级）添加一些边距和/或填充时，问题就出现了。如果我为这些div添加边框/填充/边距，我设置的上述33.333％将不再起作用，因为显然每个“top_button”div不仅包含图像，而且还包含添加到div的边框/填充/边距。

所以，我的临时解决方案是将这个百分比降低到31％。但是，根据手机的不同，屏幕右侧会留下更多或更少的像素，因为我只想用百分比来猜测div与额外边框/填充/边距的长度。我想要的是一个解决方案，即使我将边框/填充/边距设置为内部div，我仍然可以使用33.333％，因此我可以使用像素完美的水平对齐。

简而言之，如何知道div还有边框/填充/边距并且我 不 <水平对齐'n'div / strong>知道“top_button * s *”div的总宽度（因为显示器的宽度因手机屏幕而异）。

Answer 1

您在问题中描述的当前标准盒型行为。如果定义宽度，则并不意味着元素只会与宽度值一样宽。而是填充等等。

为了实现更直观的行为，您需要一个备用的盒子模型。现在，如果你定义宽度，你真的可以定义所有可能的填充，边框等宽度。

以下CSS正是您需要的。请注意，此CSS将为所有元素启用备用框模型。你也可以只为你需要的元素定义它们，尽管你不必在一个项目中混淆两种不同的方法。

*, ::before, ::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 2

使用box-sizing。 Box-sizing允许您添加填充和边框，而无需担心打破宽度。但是，保证金仍然会打破对齐。为了计算保证金，您需要从元素的宽度中减去边距量。

.top_button{
     float: left;
     width: 33.333%;
     -moz-box-sizing: border-box;      
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
 }

Answer 3

如果您遇到使用box-sizing的跨浏览器兼容性问题，可以选择其他方法。它需要为每个按钮添加一个额外的“内部”div，你可以应用你的边距。

HTML：

    <div class="top_button">
      <div class="top_button_contents">
        <a href="#">
          <img src="img/image2.png" /> some button text for testing
        </a>
      </div>
    </div>

CSS：

.top_button {
  float: left;
  width: 33.333%;
}

.top_button .top_button_contents {
  position:relative;
  margin:0px 10px 0px 0px;
  background-color:#CCC;
}

.top_button.last .top_button_contents {
 margin:0px;
}

这是jFiddle。

如何水平对齐'n'div与边距/填充？

3 个答案: