兩列 - 優文庫

我想要做的是有一個container類和固定寬度的<div>，拿着<div>與block類，以防止其他內容侵犯任何不均勻的空白區域，然後兩個列（<div>的）在block內並排，並且爲block寬度的50％。兩列

當我創建這個，我得到似乎是第一個塊後，我不想要的邊緣。我希望這個街區能收緊，沒有利潤空間。

我有什麼，我至今一個例子here，在這裏，如果代碼：

<html> 
<head> 
<title>Columns</title> 
<style> 
    div { 
     margin: 0; 
     padding: 0; 
} 
    .container { 
     background: #DDD; 
     width: 1200px; 
     margin: 0 auto; 
     padding: 2% 0; 
} 
    .block { 
     background: #555; 
     width: 100%; 
     display: block; 
} 
    .col { 
     width: 49%; 
     display: inline-block; 
     background: #333; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="block"> 

    <div class="col left"> 
     <h1>Left</h1> 
    </div> 

    <div class="col right"> 
     <h1>Right</h1> 
    </div> 

</div> 
</div> 
</body> 
</html>

來源

2013-03-06 Fifer Sheep

嘗試更換這些類：

.block { 
    background: none repeat scroll 0 0 #555555; 
    display: block; 
    overflow: auto; 
    width: 100%; 
} 

.col { 
    width: 49%; 
    float: left; 
    background: #333; 
}

來源

2013-03-06 23:42:24

美麗！像魅力一樣工作：D – 2013-03-06 23:44:27

你的問題是由inline-block是原因，採用這種使空間顯得其間。

嘗試使用float:left來解決這個問題：

See on jsFiddle

.col { 
    width: 50%; 
    float: left; 
    box-sizing: border-box; 
    background: #333; 
}

請注意，我說，box-sizing:border-box;這意味着當你使用padding它將被列入width，而不是在它的上面。有效地使用它，無需額外的內部div。

記得在之後包括一個明確的解決方案，以「清除」浮游物。

CSS

.clear { 
    clear:both; 
}

HTML

<div class="block"> 
    <div class="col left"> 
     <h1>Left</h1> 

    </div> 
    <div class="col right"> 
     <h1>Right</h1> 

    </div> 
    <div class="clear"></div> 
</div>

來源

2013-03-06 23:38:36

，消除他們之間的差距，但我忘了提，我需要「塊」在高度上拉伸與列一起。當我嘗試浮動它們時，'block'會縮小：（ – 2013-03-06 23:42:09

）您需要清除浮動。簡單的解決方法是在'.col' div後添加'
>'。 http://stackoverflow.com/questions/8554043/what-is-clearfix獲得更好的解決方案 – JoeyP 2013-03-06 23:46:08

'box-sizing：border-box'是一個有用的提示，謝謝！應該爲我節省很多數學^ _^ – 2013-03-06 23:58:39

兩列

回答

相關問題