Question

我有一个非常简单的页面，其中包含3个seciotns的包装器（float：left; width：33.333％）。

#wrapper{
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}

.row{
    width: 100%;
    _height: expression(this.height > 384 ? 384: true);
    max-height: 384px;  
    margin-bottom: 30px;
    overflow: hidden;
}  
.row:after
{
    content: "";
    display: table;
    clear: both;
}
.row .column{
    float: left;    
    width: 33.333%;
    height: 100%;
    line-height: 0; 
    overflow: hidden;
} 
.row .column .item {
    width: 100%;
    height: 50%;
    overflow: hidden;
}

现在我让它们与除Safari和Opera之外的所有浏览器完美配合，在搜索堆栈溢出和google之后我发现了几个类似的问题而没有真正有效的解决方案...一个人建议有第三列向右浮动，宽度为34％，而第一和第二列是33％，但是没有成功。在那里仍然是一个非常小的像素权利..

所以基本上它似乎是一个四舍五入的问题，我读了很多，但由于我不能改变设计我正在寻找一个解决方案......

Mi目前的解决方案是避免在野生动物园/歌剧中进行流体设计......但我绝对不为此感到骄傲..

这里我快速浏览html + css： http://jsfiddle.net/ventie30/N9SFJ/

为了给你提供更多信息，我有3行3列，行间距为40px。

具有3个宽度相等的列的布局与Opera和Safari不同

0 个答案: