在父div中对齐Child Div

Question

  

可能重复：
  Make outer div be automaticly the same height as its floating content

我觉得我在这里错过了一些非常简单的事情......

我们有一个简单的设置：包含子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.

Result

What I want

有关我可以使用#parent或.right更改内容以使child2正确对齐的任何建议？

修改

我发现的最佳解决方法是在父级上使用display:table。虽然我没有在IE中测试它，但它解决了我关心的浏览器中的问题，并避免使用评论中讨论的不直观的overflow:hidden方法。

更好的是：将孩子的左边距设置为自动。

Answer 1

尝试浮动内容并将overflow: hidden添加到父级。这是违反直觉的，但对我来说也有类似的问题。

编辑：同时将第一个孩子浮动到左侧。