1

我想在 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 的已知问题，我在寻找解决方案时发现了很多与它相关的问题，但没有找到任何合适的方法来解决我的问题。

4

3 回答 3

2

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

您希望每列占容器宽度的 23%。所以每一列应该是：

.23 * 960 = 220.8

所以每列应该是 220.8 像素。

您希望每个边距为 1% 宽。

.01 * 960 = 9.6

所以每个边距应该是 9.6 像素宽。

等一下。我们那里有一些部分像素。您如何处理 0.8 或 0.6 像素？那么你必须做一些四舍五入。但是你会选择哪种方式......向上或向下？好吧，如果你四舍五入，你最终会得到 4 列大小为 221 像素的列。

221 * 4 = 884

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

边距呢？

8 * 10 = 80

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

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

80 + 884 = 964

嗯...看起来我们这里有 4 个额外的像素...最好将内容下移一行以适合 960 像素宽的框。

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

于 2013-04-04T05:13:04.393 回答
0

只需对您的 css 进行一些小改动...

改变：-

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

对此：-

.col-1-4 {
     *width: 22.9%; 
     width: 23%;    
 }
于 2013-04-04T05:10:25.623 回答
0

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

工作小提琴

于 2013-04-04T06:39:09.043 回答