我正在尝试确定使用 CSS 和 div 制作类似并排列的布局的最佳方法。
出于某种原因，当我使用 display: inline-block; 时，如果 column-divs 的总宽度等于 100%，则最后一个 div 换行到下一行。但是，如果我使用 float div，即使宽度相同，也不会发生这种情况。
例如本例中的两个div出现在不同的行上:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" />
<style type="text/css">
.column { width: 50%;
display: inline-block;
}
</style>
</head>
<body>
<div class="column">
Column 1
</div>
<!-- This div is on the second line -->
<div class="column">
Column 2
</div>
</body>
</html>
但在这个例子中他们没有:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" />
<style type="text/css">
.column { width: 50%;
float: left;
}
</style>
</head>
<body>
<div class="column">
Column 1
</div>
<div class="column">
Column 2
</div>
</body>
</html>
同时使用 Chrome 和 IE8。
为什么会这样？
最佳答案
内联 block 尊重标记中的空白。尝试:
<div class="column">Column 1</div><div class="column">Column 2</div>
看看会发生什么
关于html - 内联 block 和 float 宽度/包装表现不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10919369/