1

我在这个演示中使用'display：inline-block'编写了一个带有弹性列的页面，但是遇到了空格和换行符的问题：

即使.left和.right都是width:50%，但由于它们之间有空格和换行符，它们实际上占据了超过 100% 的宽度，所以.right只进入下一行。

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

删除 和 之间的空格和换行符.left，.right现在它们在同一行，但 HTML 的表现力较差。

<!--demo 2-->
<div class="container">
    <div class="left box">
    </div><div class="right box">
    </div>
</div>

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

4

1 回答 1

3

工作小提琴

在 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>

已编辑

inline-blocking 增加了一个 4px 的边框（因此它移动div到下一行）。因此，float是一种更优选的方式。

你可以看到这个使用的小提琴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>

您可以在此处的博客中阅读有关这些问题的更多信息。

于 2012-07-02T03:34:17.083 回答