两列 - VoidCC

我想要做的是有一个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

两列

回答

相关问题