Question

我有以下HTML：

<div id="site_content">
    <div id="left_content">
        text
    </div>
    <div id="right_content">
        <%= image_tag "image.jpg" %>
    </div>
</div>

我的“right_content”div中的“image.jpg”比我的“left_content”中的text更垂直。 “site_content”仅扩展为text的大小，我的“image.jpg”被切断。我希望“site_content”扩展到图像的大小。这是我的CSS：

#site_content { 
    width: 950px;
    overflow: hidden;
    margin: 4px auto 0 auto;
    padding: 0;
}
#left_content { 
    float: left;
    text-align: justify;
    width: 444px;
    padding: 20px 0 5px 25px;
    margin: 0;
}
#right_content {
    float: right;
    width: 450px;
    padding: 0;
    overflow: hidden;
}

Answer 1

这是典型的clearfix问题。

例如，如果你在2个浮动div和应用clear: both属性之后添加了一个div，你会发现高度扩大了，即

<div id="site_content">
    <div id="left_content">
        text
    </div>
    <div id="right_content">
        <%= image_tag "image.jpg" %>
    </div>
    <div style="clear: both"></div>
</div>

您也可以使用CSS以更简洁的方式实现它，例如

#right_content:after {
    clear: both;
}

然而，现在使用display属性而不是浮动div来实现类似于表的布局更可靠，例如。

#site_content {
    display: table;
}
#left_content, #right_content {
    display: table-cell;
}

会给你相同类型的布局，即

             site_content
_____________________________________
|                 |                 |
|                 |                 |
|  left_content   |  right_content  |
|                 |                 | 
|_________________|_________________|

如何使用浮动div扩展div

1 个答案: