html - 将文本元素放置在容器的左右两侧，并拉伸(stretch)以包含它们

如何在div中向左右放置一些信息？我想象其中涉及浮点数，这导致我进入下面的代码。 .greybottom似乎没有意识到它们的存在，.greybottom的高度不足以容纳浮动文本。

.purplehead {
    background-color: #A971A9;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    border: 3px solid black;
    border-radius: 7px 7px 0px 0px;
    border-bottom: 0px;
}
.greybottom {
    padding: 15px;
    padding-left: 30px;
    padding-right: 30px;
    border: solid black 3px;
    border-top: 0px;
    border-radius: 0px 0px 7px 7px;
    background-color: #DDDDDD;
}
.lefttext {
    float: left;
    width: 50%;
}
.righttext {
    float: right;
    width: 50%;
}

<div class="purplehead">Title</div>
<div class="greybottom">
    <div class="lefttext">
        lorem<br/>
        ipsum<br/>
        dolor
    </div>
    <div class="righttext">
        <table style="border: 1px solid black;">
            <tr>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
            <tr>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
        </table>
    </div>
</div>

使用float时，如何使父div的高度包括浮动的子代？

最佳答案

您需要使用clearfix。

.greybottom::after {
  clear: both;
  content: "";
  display: table;
}

.purplehead {
    background-color: #A971A9;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    border: 3px solid black;
    border-radius: 7px 7px 0px 0px;
    border-bottom: 0px;
}
.greybottom {
    padding: 15px;
    padding-left: 30px;
    padding-right: 30px;
    border: solid black 3px;
    border-top: 0px;
    border-radius: 0px 0px 7px 7px;
    background-color: #DDDDDD;
}
.lefttext {
    float: left;
    width: 50%;
}
.righttext {
    float: right;
    width: 50%;
}

.greybottom::after {
  clear: both;
  content: "";
  display: table;
}

<div class="purplehead">Title</div>
<div class="greybottom">
    <div class="lefttext">
        lorem<br/>
        ipsum<br/>
        dolor
    </div>
    <div class="righttext">
        <table style="border: 1px solid black;">
            <tr>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
            <tr>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
        </table>
    </div>
</div>

关于html - 将文本元素放置在容器的左右两侧，并拉伸(stretch)以包含它们，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31973557/