Question

这就是我如何制作一个大小相同的3列页面：

<div class="wrapper">
   <div style="width:33%;float:left;background-color:red;"></div>
    <div style="width:33%;float:left;background-color:green;"></div>
   <div style="width:33%;float:left;background-color:blue;"></div>
</div>

有没有办法避免使用width:33%并输入更准确的数字？我对javascript选项很满意。

Answer 1

这可以使用CSS3 calc() property完成。

<强> CSS ：

div.column {
    width: 33.33%; /* Fallback in case the browser does not support calc() */
    width: -webkit-calc(100% / 3); /* Chrome 19 and above */
    width:    -moz-calc(100% / 3); /* Firefox 4 and above */
    width:         calc(100% / 3); /* IE 9 and above */
}

<强> HTML ：

<div class="wrapper">
   <div class="column" style="float:left;background-color:red;"></div>
   <div class="column" style="float:left;background-color:green;"></div>
   <div class="column" style="float:left;background-color:blue;"></div>
</div>

JS Fiddle Example

Browser Compatibility Table

Answer 2

首先 - 从html中获取这些样式：

<body>
    <section class="main-content">
        <div class="colum01">Column01</div>
        <div class="colum02">Column01</div>
        <div class="colum02">Column01</div>
    </section>
</body>

在你的CSS中：

.main-content {
    width: 100%;
    float: left;
    overflow: hidden;
}

.column01 {
    width: 33%;
    float: left;
    background-color: red;
}

.column02 {
    width: 34%;
    float: left;
    background-color: orange;
}

.column03 {
    width: 33%;
    float: left;
    background-color: yellow;
}

或者您可以使用33.3和33.4以及33.3％

我一直假设每个人都使用边框：一旦你开始填充，这将使一切变得神奇。将填充物推入盒子而不是外部，因此您不必担心将所有填充和宽度相加以实现100％

Paul Irish on the subject

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

如果您使用列表来显示列中的内容，您可以：nth定位每列中的第3项并仅将33.4％放在那些上...使用calc目前并不广泛支持并且使用javaScript仍然只是为你创造风格。所以我建议尽量保持简单。这对我很有用。（它消除了当你在所有3上使用33.3％时出现的那种讨厌的小黑线。

Answer 3

你不能直接使用width:33.33%吗？这不是不可能的。这甚至不是特别难，使用display: table.如果你知道你的屏幕大小，那么表格很有用。然而，响应表仍在制定中

Compatibility table支持桌面和移动浏览器中的CSS表格显示。与CSS表相关的一些IE 7修复程序是here。

CSS中的数学 - 更精确的百分比

3 个答案: