并排设置两个 div 并在其下方设置第三个答案

【问题标题】：setting two divs side by side and third one below that并排设置两个 div 并在其下方设置第三个
【发布时间】：2014-01-03 21:03:19
【问题描述】：

我如何设置两个并排的 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;
}

【问题讨论】：

在 css 中寻找 child-nth。是件好事。

标签： html css css-float

【解决方案1】：

下面的代码就可以了。你应该清除浮动。

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

【讨论】：

【解决方案2】：

你需要clear: both;

添加 CSS

#info_div_note {
    clear:both;
}

DEMO

【讨论】：

如果使用inline-block，则不需要clear:both;，如果使用float，则不需要inline-block

【解决方案3】：

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

<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 中并使用 clear fix ... 这样您的 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

【讨论】：

【解决方案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

【讨论】：