css - 如何设置高度：自动与 div 一起使用浮动：左？

Question

看，

我试着这样做，但我累了。

我有这个 HTML：

<div id="external" style="margin: 0 auto; height:auto; border:1px solid #ccc;">
<div class="mycontent">
X, Y
<br/>
Z, W
</div>
</div>

我想要的是“外部” div 具有“mycontent” div 的高度，但它仅在“外部”在样式中定义了 float:left 时才有效。我不能使用“float:left”，因为我需要始终将“外部”div 居中。

我该如何解决？

Answer 1

div的高度#external已经和div的高度一样了.mycontent。

运行这个jsFiddle，你会看到我为 div 设置的橙色背景，.mycontent而不是我为 div 设置的蓝色背景#external。

如果您希望#externaldiv 基本上.mycontent垂直和水平地包裹 div，同时在屏幕中居中，请使用display: tableand display: table-cell。

参见 jsFiddle 演示

---

HTML

<div id="external">
    <div class="mycontent">
        X, Y
        <br/>
        Z, W
    </div>
</div>

---

CSS

#external 
{
    display: table;
    margin: 0 auto;
    border: solid 1px #ccc;
    background: blue;         /* for demo purposes */
}
.mycontent 
{
    display: table-cell;
    background: orange;       /* for demo purposes */
    color: white;             /* for demo purposes */
}