Question

我在this demo中使用'display：inline-block'编写了一个包含弹性列的页面，但遇到了空格和换行问题：

尽管.left和.right都是width:50%，但由于它们之间有空格和换行符，因此它们实际占用的宽度超过100％所以{{ 1}}只是转到下一行。

.right

删除 <div class="container"> <div class="left box"> </div> <div class="right box"> </div> </div>和.left之间的空格和换行符，现在它们位于同一行，但HTML的表达力较差。

.right

那么，无论如何要保持缩进？

Answer 1

Working Fiddle

在CSS中添加两个类：

.lfloat {
    float: left;
}

.clrflt {
    clear: both;
}

将您的HTML代码更改为：

<!--demo 1-->
<div class="container">
    <div class="left box lfloat"></div>
    <div class="right box lfloat"></div>
    <div class="clrflt></div>
</div>

EDITED

内联阻塞添加了4px边框（由于它将div移动到下一行）。因此，float是更优选的方式。

You can see this fiddle使用display:inline-block：

<html>
    <head>
        <style>
        *{padding:0;margin:0}
        ul#container{width:204px}  //Had to add 4px for extra width
         ul#container li{display:inline-block;height:100px;width:100px;background:#666}
        .left{width:50%}
        .right{width:50%;background:#0ca}
        </style>
    </head>
    <body>
        <ul id="container">
           <li>Left</li>
           <li>Right</li>
        </ul>
    </body>
    </html>

You can read more about these issues at a blog here.

占用空间的内联块元素之间的空白和换行符

1 个答案:

EDITED