什麼是更好的垂直分頻器解決方案？

在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

什麼是更好的垂直分頻器解決方案？

回答

相關問題