内联-块和浮动宽度/换行的行为不同？
内联-块和浮动宽度/换行的行为不同？
提问于 2012-06-07 01:45:11
我正在尝试确定使用CSS和div制作并排列式布局的最佳方法。
由于某种原因，当我使用display: inline-block;时，如果column- div的总宽度等于100%，那么最后一个div会换行到下一行。但是，如果我使用浮动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。
这一切为什么要发生？
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-06-07 01:50:40
inline-block尊重标记中的空格。尝试：
<div class="column">Column 1</div><div class="column">Column 2</div>看看会发生什么
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10919369
复制相关文章
相似问题
腾讯云开发者
