Question

我如何将div的高度设置为与另一个div相同，只有带文字的CSS？

例如，我有一个div max-width为10px且包含文本

CSS是设计网页最着名的编程语言之一

并有另一个div max-width也是10px。

<div style="max-width:10px">CSS is one of the most famous Programming Language to design webpages</div>
<div style="max-width:10px"></div>

我想要的是将第二个div的高度设置为等于第一个Div相对于内容的高度。如果div有更多或更少的文本，它可以通过它调整。

我的小提琴：http://jsfiddle.net/p38hmoz0/

注意：我不能为此目的使用jquery或javascript，因为我很难将它添加到聚合物中，因为它使用阴影dom。**

Answer 1

只有在可以添加包装并使用display: table;时才能使用css执行此操作：JS Fiddle

注意：我调整了最大宽度，并在空div中添加了蓝色背景以显示示例。

HTML

<div class="table">
    <div style="max-width:100px">CSS is one of the most famous Programming Language to design webpages</div>
    <div style="max-width:100px" id="two"></div>
</div>

CSS

.table {
        display: table;        
}
.table div {
        display: table-cell;
}

Answer 2

既然你说你可以将第二个div作为第一个div的孩子：

演示： http://jsfiddle.net/p38hmoz0/6/

HTML：

<div class="parent">
    CSS is one of the most famous Programming Languages to design webpages
    <div></div>
</div>

CSS：

div.parent {
    position: relative;
    max-width: 10px;
}
div.parent > div {
    max-width: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    height: 100%;
    border: 1px solid #0ff; /* for demo purposes */
}

Answer 3

你不能按照你解释的方式做到这一点，因为CSS是无状态的，你不可能知道你之前没有定义的任何东西。我建议你使用包装和表格显示

HTML

<div id="wrapper">
<div id="div1" style="max-width:10px">CSS is one of the most famous Programming Language to design webpages</div>
<div id="div2" style="max-width:10px"></div>
</div>

CSS

#wrapper
{
    display: table;
}
#div1
{
    border: 1px solid blue;
    display: table-cell;
}

#div2
{
    border: 1px solid yellow;
    display: table-cell;
}

JSFiddle

设置与其他div相同的div高度

3 个答案: