什么是更好的垂直分频器解决方案？

Question

在2个div的中心制作垂直分隔线的更好方法。我希望分隔符位于“为什么选择”和“画廊”

中间

就像我的例子

这是我尝试过的，但如果你有一个比这更好的解决方案，那就太好了。提供75px填充似乎没问题，但我认为这不是最好的做法。

.why-choose-us{
    padding: 0  10px;
    width: 500px;
    float: left;
    ul li{
        list-style-type: none;
        margin-left: -30px;
        line-height: 2;
        clear: both;
    }
}

.gallery{
    width: 400px;
    float: left;
    padding-left: 75px;
    border-left: 1px solid #c1c1c1;
    img{
        border-radius: 3px;
        padding: 5px
    }
}

因此，如果div为400px，那么分频器仍然可以使用更多的px，那么就说吧。

http://jsfiddle.net/21g2Lona/1/

Answer 1

可以使用CSS多列布局吗？

-webkit-column-count: 2;

您只需要将所有标记放在一列中，让CSS为您创建分隔符。

PS：您需要使用适当的供应商前缀以及-webkit。

Answer 2

我是这些布局的CSS flexbox模块的忠实粉丝。你可以阅读它here。目前，人们根据http://caniuse.com/#feat=flexbox使用的浏览器支持86％。

要在所有浏览器中正确显示，您可以使用fallbacks and prefixes。

但是，您的解决方案也很好。如果你这样做，我只会使用margin而不是padding。当然，对这些主要布局使用float可能会导致许多问题，并且可能需要修复许多额外的CSS规则。

Answer 3

我喜欢使用box-sizing：border-box sizing，只要你需要垂直划分页面并包含填充，边距或边框。

默认box-sizing为content-box，它仅将width规则应用于元素的内容 - 如果添加了边框，填充或边距，则它们将另外添加到宽度。 border-box更改此值，以便宽度规则适用于整个元素 - 如果添加了边框，填充或边距，则不会增加元素的大小，而是消耗元素中的空间。

这是一个更新的小提琴：http://jsfiddle.net/21g2Lona/5/

这是重点：

section {
    float: left;
    padding-left: 10px;
    width: 50%;
    box-sizing: border-box;
}

.gallery{
    float: left;
    border-left: 1px solid #c1c1c1;
...
}

section规则除了添加边框外几乎可以做任何事情。关键位是box-sizing: border-box和width: 50%的组合。它们一起意味着每个<section>将是其父元素宽度的50％，并且它们的宽度包括它们的边框，边距和填充。常规box-sizing使用content-box，在这种情况下width规则仅适用于内容 - 添加任何填充，边框或边距将进一步扩大元素在页面上的整体尺寸。