Question

我想在任何具有动态宽度的容器内创建一些宽度和DIV中可以容纳的百分比边距的列。

<div class="gridFluid">
    <div class="col-1-4"></div>
    <div class="col-1-4"></div>
    <div class="col-1-4"></div>
    <div class="col-1-4"></div>
</div>

 * {
     margin: 0;
     padding: 0;
 }
 body {
     font-size: 1%
 }
 .gridFluid {
     width: 960px;
     display: table;
     background: #eee;
     font-size: 0px;
     overflow: auto;
     zoom: 1;
 }
 .col-1-4 {
     background: #ddd;
     height: 200px;
     width: 23%;
     display: table-cell;
     *display: inline;
     zoom:1;
     margin-left: 1%;
     margin-right: 1%;
     float: left;
 }

它在任何地方都按预期工作，但在IE7中，最后一列无法在单行中正确匹配。可能是因为它在除了保证金之外的DIV之间增加了额外的空间。

我不想为IE7使用不同的宽度或边距（宽度：24.5％而不是25）。因为它不是一个合适的解决方案。我正在寻找一个好的解决方案。

可能是IE7的已知问题，当我正在寻找解决方案但没有得到任何正确的方法来解决我的问题时，我发现很多与之相关的问题。

Answer 1

让我们根据您的CSS进行一些快速计算。

您希望每列都是容器宽度的23％。所以每列应该是：

.23 * 960 = 220.8

因此每列应为220.8像素。

您希望每个边距都是1％宽。

.01 * 960 = 9.6

因此每个边距应为9.6像素宽。

等一下。我们在那里有一些局部像素。你如何处理像素的.8或.6？那么你必须做一些四舍五入。但你绕哪个方向......向上或向下？好吧，如果你向上舍入，你最终得到4列大小221像素。

221 * 4 = 884

因此，列的总宽度估计为884像素。

利润率怎么样？

8 * 10 = 80

因此边距的总宽度估计为80像素。

现在让我们将这些数字加在一起。

80 + 884 = 964

Hrmm ......看起来我们这里有4个额外的像素...更好地将内容推到一条直线以适应960px宽的盒子。

这就是你的专栏被推倒的原因。另外，请查看：http://ejohn.org/blog/sub-pixel-problems-in-css/

Answer 2

只需对你的CSS进行一些小改动......

更改： -

.col-1-4 { width: 23%; }

对此： -

.col-1-4 { *width: 22.9%; width: 23%; }

Answer 3

双重div怎么样？这显然可以解决问题。

 .col-1-4 {
     position:relative;
     background: #eee;
     height: 200px;
     width: 25%;
    /*******************************/
    /* Don't use this properties, not necessary here */
     display: table-cell;
     *display: inline;
    /*******************************/
     zoom:1;
     float: left;
 }
 .col-1-4>div {
     background: #ddd;
     position:absolute;
     left:4%;
     right:4%;  /* 100/25 = 4 */
     top:0;
     bottom:0;
 }

Working Fiddle

浮动DIV中的IE7间距问题左右边距

3 个答案: