Question

我尝试了一下，因为我不明白是什么原因导致等分列之间的空格，http://jsfiddle.net/esvNe/帮助了我，但是我花了一段时间才注意到这些评论，

<div id="wrapper">
<div id="c1" style="background:red"></div><!--
--><div id="c2" style="background:blue"></div><!--
--><div id="c3" style="background:yellow"></div>
</div>

这是一个单线解决方案，丑陋！

http://jsfiddle.net/qFm8U/

有更好的方法吗？

（也就是说，将div分成相等的部分而没有填充/边距黑客或单行/注释内容）

Answer 1

inline-block创建了div之间的空白区域：正如属性的名称所示，它有点像inline，其中意味着它会占用空间和换行符，并考虑到＃34;可以这么说。（希望这很有意义。）尝试使用display: block;和float: left;这样：

div div {
    height: 50px;
    background-color: green;
    width: 32.666%;
    display: block;
    float: left;
}

请注意宽度略小于三分之一 - 这是考虑三个块之间的余量的原因。现在我们在左边的两个div中添加一个类：

<div id="wrapper">
    <div id="c1" class="left" style="background: red;"></div>
    <div id="c2" class="left" style="background: blue;"></div>
    <div id="c3" style="background:yellow"></div>
</div>

最后，还有一些CSS在div之间添加填充：

div .left {
    margin-right: 1%;
}

这是一个小提琴：http://jsfiddle.net/Niffler/g2fBQ/

同等划分的列在没有评论退货的情况下不起作用，有更好的方法吗？

1 个答案: