2

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

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

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

我将如何让 CSS 做到这一点？

编辑：如果对任何人有帮助的话，我已经创建了一个迄今为止我所拥有的小提琴。我决定在这里不使用浮点数，而是使用绝对位置+边距，这样左侧 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;
}

编辑：我也创建了一个带有浮动的版本。

.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:"";
}
4

2 回答 2

1

这有帮助吗？

小提琴

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;
}
于 2013-12-06T16:06:48.337 回答
0

所以你希望你的第二个 div 总是与你的第一个 div 处于相同的高度，即使它的内容更大？

据我所知，在不使用固定高度的情况下，不可能将 div 的高度声明为小于面向另一个 div 的内容。

在这里，我找到了一个相同高度 div 的示例，但它始终适用于较大的 div ......但是，也许它对您有所帮助：如何保持两个并排高度相同的 div？

于 2013-08-02T04:45:44.413 回答