css - 展开内容区

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 并移除 float ，以便包装器正确包装。

如果你想保持 float ，那么在 float 元素之后使用 clear 或将 overflow:auto 添加到包装器