问题描述
我在使用boxsize和inline-block vs float进行实验。
我很遗憾为什么我得到不同的结果为以下：
I was experimenting with using boxsize and inline-block vs float. I am stumped as to why I get different results for the following:
更具体地说 - 为什么内联块封装？如果我使用Chrome的开发者工具，它会报告左和右div为240像素宽。
More specifically - why does the inline-block wrap? If I use Chrome's developer tool it reports both "left" and "right" divs as 240 pixels wide.
感谢
推荐答案
inline-block 元素流就像文本一样，所以两个div之间的换行符被呈现为空格字符，这使得总宽度（left div + space + right div）大于100％。
inline-block elements flow just like text does, so the newline character between the two divs is rendered as a space character, which makes the total width (left div + space + right div) greater than 100%.
下面的示例将会正常工作，即使 inline-block 。
The below example will behave as expected even with inline-block.
<html>
<body>
<div class="container">
<div class="boxsize">Left</div><div class="boxsize">Right</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
另一种方法是使用注释来删除空格，这可以帮助缩进。
Another method is to use comments to remove the whitespace, which can help with indentation.
<html>
<body>
<div class="container">
<div class="boxsize">Left</div><!--
--><div class="boxsize">Right</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
这篇关于CSS：inline-block不与boxsize的float在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！