展开内容区域

Question

我有一个网页，上面使用了这个tabs script。我想在其中一个选项卡中添加两列布局，我使用以下代码：

<div class="content-wrapper">
    <div class="con con-left">
        Column 1
    </div>
    <div class="con con-right">
        Column 2
    </div>
</div>

适用于此CSS：

.content-wrapper
{   width: 100%;
    margin: 0 auto; }
.con
{   margin: 0 10px;
    float: left; 
    display: inline; }
.con-left
{   width: 500px; }
.con-right
{   width: 500px; }

问题是标签的大小不会扩展到div内的文本量 - 如下图所示。如何设置CSS以便标签能够识别<div>标签中的内容？

Answer 1

你不能在内联元素上设置宽度 - 使它们inline-block并删除浮动，以便包装器正确包装。

如果你想保留浮动，那么在你的浮动元素之后使用clear或者将overflow:auto添加到包装器

Answer 2

如果你想使用花车，你需要清除它们。

你可以尝试：

.content-wrapper {
    width: 100%;
    margin: 0 auto; 
    overflow: auto;
}

在包含块上设置overflow: auto将按预期包含所有浮动。