1

我有以下 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%，因此我可以进行像素完美的水平对齐。

简而言之，我如何才能水平对齐 'n' div，因为我知道 div 也会有边框/填充/边距，而且我不知道“top_button * s *” div 的总宽度（因为显示的宽度会有所不同取决于手机屏幕）。

4

3 回答 3

2

当前的标准盒模型行为是您在问题中描述的。如果您定义宽度，这并不意味着元素将仅与宽度值一样宽。而是将填充等添加到其中。

为了实现更直观的行为，您需要一个替代的盒子模型。现在，如果您定义宽度，您实际上是用所有可能的填充、边框等来定义宽度。

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

*, ::before, ::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
于 2013-02-04T21:13:21.757 回答
2

使用盒子大小。Box-sizing 允许您添加填充和边框，而不必担心破坏宽度。但是，边距仍会破坏对齐方式。为了计算边距，您需要从元素的宽度中减去边距。

.top_button{
     float: left;
     width: 33.333%;
     -moz-box-sizing: border-box;      
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
 }
于 2013-02-04T21:13:59.093 回答
0

如果您遇到与 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。

于 2013-02-04T21:23:02.100 回答