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

在两个分区的中心制作垂直分隔带的更好方法。我希望分割线位于为什么选择和画廊的中间

比如我的例子

这是我尝试过的，但如果你有比这更好的解决方案，那就太好了。给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可用

---

可以使用CSS多列布局吗

-webkit-column-count: 2;

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

---

PS：您需要使用合适的厂商前缀以及-webkit。

我非常喜欢CSS flexbox模块，它可以用于这些类型的布局。你可以读到它。据统计，目前86%的用户使用的浏览器都支持它

使其在所有可使用的浏览器中正确显示

但是，您的解决方案也很好。如果你这样做的话，我会用边距代替填充。当然，在这些主要布局中使用float可能会导致许多问题，并且可能需要修复许多额外的CSS规则。

每当需要垂直分割页面并包括填充、边距或边框时，我都喜欢使用：边框框大小

默认框大小是内容框，它将仅对元素的内容应用宽度规则，如果添加边框、填充或边距，则它们将添加到宽度之外。边框框会对此进行更改，因此宽度规则将应用于整个元素如果添加边框、填充或边距，它们不会增加元素的大小，而是会占用元素内的空间

这是最新的提琴：

以下是突出的几点：

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

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

---

section规则除了添加边框外，几乎完成了所有操作。关键点是框大小：边框框和宽度：50%的组合。它们加在一起意味着每个元素都是其父元素宽度的50%，并且它们的宽度包括边框、边距和填充。常规框大小调整使用内容框，在这种情况下，宽度规则仅适用于添加任何填充、边框或边距的内容，这将进一步扩大页面上元素的整体大小。

尝试一下我没有尝试过的方法；但是看不出有什么区别：/n在gallery标签中为正确的容器留一个边距？但是它已经被填充了？或者将填充改为边距？呃。。。我会同意的。但当我使用剩余保证金时：75px；代替填充，它不会在图像和除法器之间产生任何空间：/移除从图库左边留下的填充物，并将右边的空白添加到.Way-Soudi-U.A.不错的方法，但我想做的是把分配器正好放在中间的div中。如果你在第一部分的右边放一个1px的边框，在第二秒的左边有一个1px的边框，这样它就可以完全居中了。对不起，这让我有点困惑，如果可以的话，你可以发布一个jsfiddle吗。