考虑下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<style>
#block0 {
width:400px
}
#block1, #block2, #block3 {
float: left;
display:inline;
}
#block1 {
background-color:red;
width:48%;
height:200px;
}
#block2 {
background-color:blue;
width:48%;
height:120px;
}
#block3 {
background-color:green;
width:48%;
height:140px;
}
</style>
</head>
<body>
<div id="block0">
<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
</div>
</body>
</html>
如何使 block3(green) block 向左对齐并使其位于 block1(red) block 下方，并有限制:
- 不添加额外的 HTML 标记
- 如果需要应用新的css，需要应用到所有 block
更新:限制
最佳答案
#block1, #block2, #block3 {
display:inline-block;
vertical-align: top;
}
(没有 float )
要消除标记留下的空间，您还可以添加负右边距，如下所述:http://css-tricks.com/fighting-the-space-between-inline-block-elements/
关于html - 向左浮动被阻塞且未与左对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14416782/