Question

我正在尝试使用CSS创建布局并遇到以下问题。

我有两个div，并排显示（一个向左浮动），包裹在第三个div中。这很好。

我想要做的是让一个div有自由高度（调整到内容），我希望另一个div 永远不会大于此。因此，例如，如果第一个div是3行文本而第二个是4行，则第二个div应该进入溢出。但我不想给第一个div或包装器的高度赋予固定值。

我如何让CSS做到这一点？

编辑：我创造了迄今为止我所拥有的Fiddle，如果这有助于任何人。我决定不在这里使用浮点数而是去了一个绝对位置+保证金，所以左边的div区域将保持清空。

所以我想要的是蓝色与红色相同的高度（如果我启用它就会打开溢出），但没有必须将任何东西的高度设置为固定数字。

HTML：

<div class="wrapper group">
    <div class="left">Lorem ipsum dolor sit amet, vide porro ubique vis ei.</div>
    <div class="right">Probo fabulas inermis cu cum. Eros voluptatibus vel te, ea sea velit quaestio consectetuer, modus facete no qui. Has eu quidam salutandi dissentiunt, his sanctus voluptatibus ei. Has lorem complectitur te, in per adipisci gloriatur dissentiunt. E</div>
</div>

CSS：

.left {
    display: block;
    background-color: red;
    width: 10em;
    position: absolute;
}
.right {
    margin-left: 10em;
    display: block;
    background-color:blue;
}
.wrapper {
    width: 100%;
    border-style: solid;
    border-color: yellow;
}

编辑：我也创建了一个带浮动的version。

.left {
    float: left;
    display: block;
    background-color: red;
    width: 10em;
}
.right {
    margin-left: 10em;
    display: block;
    background-color:blue;
}
.wrapper {
    width: 100%;
    border-style: solid;
    border-color: yellow;
}
.group:after {
    display: table;
    clear: both;
    content:"";
}

Answer 1

这有帮助吗？

Fiddle

HTML：

<div class="wrapper">
    <div class="left">
        Lorem ipsum dolor sit amet, vide porro ubique vis ei.
    </div>
    <div class="right">
        Probo fabulas inermis cu cum. Eros voluptatibus vel te, 
        ea sea velit     quaestio consectetuer, modus facete no qui. 
        Has eu quidam salutandi dissentiunt, his sanctus voluptatibus ei. 
        Has lorem complectitur te, in per adipisci gloriatur dissentiunt. E
    </div>
</div>

CSS：

.wrapper {
    display:table;
    border:1px solid #AFAFAF;
    padding: 3px;
    width:300px;
}
.left {
    display: table-cell;
    border-right: 1px solid #EFEFEF;
    width:30%;
    padding: 3px;
}
.right {
    display: table-cell;
    width:70%;
    padding: 3px;
}

Answer 2

所以你希望你的第二个div总是和你的第一个div一样高，即使它的内容更大？

据我所知，如果不使用固定高度，则不可能将div的高度声明为小于其内容的另一个div的内容。

在这里我找到了一个相同高度div的例子，但是它总是适合更大的div ......但是，它可能会帮助你：How do I keep two divs that are side by side the same height?

CSS - 两个div并排，有一个定义最大高度

2 个答案: