我想要做的是有一个<div>具有container类和固定宽度,拿着<div>用block类,以防止其他内容侵犯任何不均匀的空白区域,然后两个列(<div>的)并排侧内block,并成为50%的宽度block.
当我创建这个时,我得到的是第一个块之后的边距,这是我不想要的.我希望街区收紧,没有利润.
我在这里有一个例子,我到目前为止,如果代码:
<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>
你的问题是由问题引起的inline-block,使用它会使空间出现在中间.
尝试使用float:left来解决这个问题:
.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>
| 归档时间： |
|
| 查看次数： |
3786 次 |
| 最近记录： |