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

-1

如何将div的高度设置为与仅包含文本的CSS的另一个div相同？设置div的高度与其他div的相同

比如我有一个div其max-width是10px的，它包含的文本

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

，并有另一格，其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 * *

来源

2015-02-09 Utkarsh Dixit

@Daniel平松你有没有回答我的问题 – 2015-02-09 15:51:45

上.... OP'divs'工作放在一边还是放在另一边？ – DaniP 2015-02-09 15:53:50

一个在另一个 – 2015-02-09 15:54:17

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 */ 
}

来源

2015-02-09 16:26:17 Arbel

感谢您的回答 – 2015-02-09 16:28:47

不客气。很高兴为您提供帮助。 – Arbel 2015-02-09 16:29:10

您可以用CSS这样做只是如果你可以加一个包装，并使用display: table;：JS Fiddle

注：我调整了最大宽度，并添加了蓝色backgr回到空白的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; 
}

来源

2015-02-09 15:53:23

我也在使用'table-cell'，但是正如你在评论中看到的，OP不想把div放在一边 – DaniP 2015-02-09 15:55:26

我想要div一个在另一个 – 2015-02-09 15:58:35

你不能做到这一点你解释为CSS是无状态的方式，你可以不知道你以前没有定义的东西。我建议你既然你说你可以使第二div作为第一个孩子使用的包装和表显示

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

来源

2015-02-09 15:55:34 Jaay

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

回答

相关问题