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

在2格中心制作垂直分隔线的更好方法。我想分隔是在中间的“为什么要选择”和“画廊”什么是更好的垂直分频器解决方案？

像我举的例子 enter image description here

这是我做过尝试，但如果你有比这更好的解决方案，会是很大的。给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 
    } 
}

所以如果divs是每个400px那么几个px仍然可用于分频器，所以说。

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

来源

2014-10-01 nCore

试试这个http：// jsfiddle。net/21g2Lona/1/ – 2014-10-01 13:16:21

我没有看到任何区别：/ – nCore 2014-10-01 13:17:56

给正确的容器留出余量。 – Siyah 2014-10-01 13:28:49

可能使用CSS多列布局？

-webkit-column-count: 2;

您只需将所有标记放在一列中，让CSS为您创建分隔符。您需要使用合适的供应商前缀以及-webkit。

来源

2014-10-01 13:26:30 myTerminal

不适用于较旧的IE版本。 – Siyah 2014-10-01 13:28:12

Err ...我同意这一点。 – myTerminal 2014-10-01 13:49:34

我是CSS flexbox模块对这些布局的狂热粉丝。你可以阅读关于它here。根据http://caniuse.com/#feat=flexbox，目前有86％的浏览器支持它。

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

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

来源

2014-10-01 13:50:02

但当我使用margin-left：75px;而不是填充它不会在图像和分隔线之间留下任何空白：/ – nCore 2014-10-01 13:57:08

从'.gallery'中删除'padding-left'并将'margin-right'添加到'.why-choose-us'。 – 2014-10-01 14:51:15

我是使用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规则仅适用于内容 - 添加任何填充，边框或边距将进一步扩大页面上元素的整体大小。

来源

2014-10-01 14:05:46 STW

我认为应该做的很好，但我试图做的是将分隔线置于中间*正好在中间*。 – nCore 2014-10-01 14:13:49

好吧，如果您在第一部分的右侧放置1px边框，并在第二秒的左侧放置1px边框，那么它将完美居中。 – STW 2014-10-01 18:37:37

对不起，我困惑了一下，你可以发布一个jsfiddle，如果没关系的话。 – nCore 2014-10-01 19:22:51

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

回答

相关问题