css - 展开内容区

Question

我有一个使用此标签脚本的网页。我想向其中一个选项卡添加一个两列布局，我正在使用以下代码：

<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请在浮动元素之后使用 a 或添加overflow:auto到包装器中

Answer 2

如果要使用浮点数，则需要清除它们。

你可以试试：

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

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