2015-02-09 7 views
-1

Как установить высоту div, чтобы она была такой же, как и другая div, только с CSS с текстом?Установите ту же высоту div, что и у другого div

Например, у меня есть 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 для этой цели, потому что это будет трудно для меня, чтобы добавить его в полимере, как он использует тень РОМ * *

+0

@Daniel Pinzon У вас есть ответ на мой вопрос –

+0

работать над этим .... ОП 'divs' в сторону или только один под другим? – DaniP

+0

Один ниже другого –

ответ

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

Спасибо за ответ –

+0

Добро пожаловать. Рад помочь вам. – Arbel

2

вы можете сделать это с помощью CSS, только если вы можете добавить обертку и использовать display: table;: JS Fiddle

Примечание: я настроил максимальную ширину и добавил синий backgr ound для пустого 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; 
} 
+0

Я тоже работал с 'table-cell', но, как вы видите в комментариях, OP не хочет, чтобы divs в стороне – DaniP

+0

Я хочу div One Ниже другого –

1

Вы не можете сделать это так, как вы объяснить, как 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

Смежные вопросы