可能重复:
使外部div自动与其浮动内容的高度相同

我觉得我在这里错过了很简单的东西......

我们有一个简单的设置:包含子div的父div.我想要:

• 让父母根据孩子调整其身高
• 将子项与父项的右边缘对齐,而不是默认左边.

使用float:right将导致父级不再正确调整大小并且子级"跳出"父级.

我尝试过使用align: right,text-align: right但到目前为止还没有骰子.

HTML:

    <div id="parent"> <p>parent</p>
        <div class="child"> <p>child</p> </div>

        <div class="child right"> <p>child2</p> </div>
    </div>

CSS:

    div{ padding: 15px; margin: 5px; }
    p{ padding: 0; margin: 0; }

    #parent{
        background-color: orange;
        width: 500px;
    }

    .child{
        background-color: grey;
        height: 200px;
        width: 100px;
    }

    .right{ float: right; } // note: as the commenters suggested I should also be using a float:left on the other child.

结果: …

在FAQ页面中,我试图让我有一个具有这种结构的页面:

<section id="container">

     <div id="faq_primary"></div>
     <div id="faq_sidebar"></div>

</section>

<footer>

     <div id="directory">

          <div id="col_a"></div>
          <div id="col_b"></div>
          <div id="col_c"></div>

     </div>

</footer>

这是相关的CSS:

#container {
    width:960px;
    margin: 0px auto;
    position:relative;
}

#faq_primary {
    width:720px;
    margin:20px 40px 0 0;
    position:relative;
    float:left;
    display:inline; 
}

#faq_sidebar {
    left:760px;
    position:absolute;
}

footer {
    width:1111px;
    height:250px;
    margin:90px auto 0px;
    position:relative;
    background-image:url(../images/footer/bg.png);
    color:#7d7d7d;
}

#directory {
    width:960px;
    margin:0px auto;
    padding-top:25px;
    font-size:13px;
}

#directory ul li{
    padding-bottom:4px;
}

#dir-cola, #dir-colb, #dir-colc, #dir-cold, #dir-cole {
    width:174px;
    height:140px;
    float:left;
}

#dir-cola { …

我有嵌套divs,大多数是float:left; display:block;,像:

<div class="container" style="display:block;">
    <div style="float:left; display:block; height:100px;">
    <div style="float:left; display:block; height:100px;">
</div>

我希望div容器在不设置高度的情况下变大.目前这是一条扁平线.
如何设置内部divs,以便容器具有高度？

TL; DR:目前我可以看到2里面div很好,但是容器是扁平的div(没有高度).
我怎么给它一个高度？

我想折叠并在点击链接时显示两列.

我已将两列包装在a中div,其中有一个id由上面列中的链接引用.第一列占据页面的整个宽度,第二列和第三列应该拆分页面或堆栈.所有三列都包含在a中div.row,行在页面中重复.

看起来崩溃动画适用于具有边框的行.然而,开放转型"跳跃"回升.如果我删除行上的边框并单击链接,则会突然出现两列之前的延迟.

我不希望这些事情发生.我希望在单击链接时显示两列的平滑过渡.我怎么能做到这一点？

<div class='container'>
  <div class='row' style='border-bottom: 1px solid #ddd;'>
    <div class='col-xs-12'>
      <a data-toggle='collapse' href='#details1'>Open or close details</a>
    </div>
    <div class='collapse' id='details1'>
      <div class='col-sm-6'>
        <table class='table table-bordered table-condensed'>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
        </table>
      </div>
      <div class='col-sm-6'>
        <b>Hello world</b>
      </div>
    </div>
  </div>

  <div class='row'>
    <div class='col-xs-12'>
      <a data-toggle='collapse' href='#details2'>Open or close details (row with no border)</a>
    </div>
    <div class='collapse' id='details2'>
      <div class='col-sm-6'>
        <table class='table table-bordered table-condensed'>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
        </table>
      </div>
      <div …

在以下HTML代码段中,如何使最终段落显示在2个列表下而不是右侧？

<div>
    <ul style="float: left;">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
    <ul style="float: left;">
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
    </ul>
</div>
<div>
    <p>
        <!-- why the heck isn't this under the uls?! -->
        A final paragraph of text
    </p>
</div>

这个HTML也可以在这里找到:http://jsfiddle.net/8f2cE/

此外,我很感激任何背景解释为什么会发生这种行为.IMO这是不一致的,因为默认情况下2 divs是根级别没有display: block;设置任何浮动属性,所以它们不应该从页面的上到下流动为"正常"？