1

这就是我制作大小相等的 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 选项没问题。

4

3 回答 3

1

首先 - 从 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%

保罗·爱尔兰关于这个问题

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

如果您使用列表在列中显示内容，您可以 :nth 以每列中的第 3 个项目为目标，并仅在这些项目上放置 33.4%... 目前还没有广泛支持使用 calc 并且使用 javaScript 仍然只是将为您创建样式。所以我建议让事情尽可能简单。这对我很有用。（它消除了当你在所有 3 上使用 33.3% 时出现的那个讨厌的小黑线。

于 2013-02-16T18:51:47.607 回答
1

这可以使用CSS3calc()属性来完成。

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 小提琴示例

浏览器兼容性表

于 2013-02-16T18:06:21.947 回答
0

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

支持在桌面和移动浏览器中显示 CSS 表的兼容性表。一些与 CSS 表相关的 IE 7 修复在这里。

于 2013-02-16T17:56:27.673 回答