内联块和浮点宽度/包装行为不同？ [英] inline-block and float widths/wrapping behave differently?
问题描述
我试图决定没有最好的方法使用CSS和 div s做一个并列的列布局。
I'm trying to decide no the best way to make a side-by-side column-like layout using CSS and divs.
由于某些原因，当我使用 display：inline-block; 时，如果column-divs的聚合宽度等于100％最后一个div换行到下一行。
For some reason when I use display: inline-block;, if the aggregate width of the column-divs is equal to 100%, the last div wraps onto the next line. However, if I use floating divs, this doesn't happen, even with identical width.
例如，此示例中的两个div出现在不同的行上：
For example, the two divs in this example appear on different lines:
<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>
但在此示例中，他们不会：
But in this example they don't:
<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。
Using both Chrome and IE8.
为什么会发生这种情况？
Why does this happen?
推荐答案
inline-block尊重标记中的空格。 try：
inline-block respects white-space in your markup. try:
<div class="column">Column 1</div><div class="column">Column 2</div>
查看会发生什么
这篇关于内联块和浮点宽度/包装行为不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
