并排设置两个div，然后设置第三个div

Question

我如何并排设置两个div，而下面的第三个div设置为

。

我当前的代码如下所示，它将注释div放在名称div之后

HTML：

<div id="info_div">
    <div id="info_div_name">Name</div>
    <div id="info_div_time">6:30 PM</div>
    <div id="info_div_note">Note</div>
</div>

CSS：

#contact_table_data {
    width:inherit;
    height:inherit;
    background-color:#99cc33;
    max-width:400px;
}

#info_div_name {
    width:auto;
    height:auto;
    padding: 5px 0px 5px 10px;
    float:left;
}

#info_div_time {
    width:auto;
    height:auto;
    padding: 5px 10px 5px 0px;
    float:right;
}

#info_div_note {
    width:inherit;
    height:auto;
    position:static;
    padding: 0px 10px 5px 10px;
}

Answer 1

以下代码可以。你应该清除浮子。

#info_div_note {
clear: both;
width: inherit;
height: auto;
position: static;
padding: 0px 10px 5px 10px;
}    

Answer 2

您需要clear: both;

添加CSS

#info_div_note {
    clear:both;
}

DEMO

Answer 3

在clear: both;之前添加<div id="info_div_note">Note</div>以清除浮动元素，这将解决您的问题。

<div id="info_div">
    <div id="info_div_name">Name</div>
    <div id="info_div_time">6:30 PM</div>
    <div style="clear: both;"></div>
    <div id="info_div_note">Note</div>
</div>

Demo

现在这不是最佳解决方案，因为您每次都必须添加清除div，因此最好将浮动元素包装在div中并使用明确修复...所以你的DOM将会就像

<div id="info_div">
    <div class="self_clear">
        <div id="info_div_name">Name</div>
        <div id="info_div_time">6:30 PM</div>
    </div>
    <div id="info_div_note">Note</div>
</div>

而不是像class一样使用

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

您可以参考我的答案here和here获取更多信息

---

您不需要static，因为这是默认元素position

Answer 4

#contact_table_data {
width:inherit;
height:inherit;
background-color:#99cc33;
max-width:400px;
}

#info_div_name {
    width:auto;
    height:auto;
    padding: 5px 0px 5px 10px;
    float:left;
}

#info_div_time {
    width:auto;
    height:auto;
    padding: 5px 10px 5px 0px;
    float:right;
}

#info_div_note {
    clear: both;
    width:inherit;
    height:auto;
    position:static;
    padding: 0px 10px 5px 10px;
}

Fiddle