2010-10-05 3 views
3

Я задал этот вопрос перед и получил указал на эту link, который я затем и реализован метод в моем page:не может получить два div, чтобы быть одинаковой высоты!

Обратите внимание на объявление DIV и DIV рядом с ним. Я хочу, чтобы объявление div было того же роста, что и его коллега.

Что мне не хватает?

+3

Дивы изменяются в соответствии с их содержанием. Вам просто нужно положить высоту: 300 пикселей (или любой другой размер, который вы ищете) в css. – Tim

+0

не приведет к тому, что он будет неравным в разных браузерах? – samwick

+2

Посмотрите, вот плохая новость: вы ** не реализовали то, что видите в этом учебнике. Пойдите, дайте ему хорошее чтение, затем попробуйте реализовать его, прежде чем приходить и спрашивать, почему он не работает. –

ответ

0

Вы не сделали, насколько я могу сказать, попытка (или реализация) метод лже-столбцы, которые вы связаны в вашем вопросе, однако, потому что нет никакого способа принуждения, с помощью CSS , два родных брата, чтобы сохранить ту же высоту, без явного определения высоты, и так как вы уже используете JQuery, я придумал с этим cludgy и не-очень-портативный подход:

$('#container1 > div').each(
     function(){ 
     if ($(this).height() > $(this).next().height()){ 
      $(this).next().css('height',$(this).height()); 
     } 
     else { 
      $(this).css('height',$(this).next().height()); 
     } 

     }); 

кончено на JS Bin для вашего прочтения.

+0

thats smart! спасибо – samwick

+0

Недостатком является то, что он добавляет много свободного пространства перед нижним колонтитулом.Я думаю, это потому, что в контейнере 1 есть 3-й div, который заботится о том, чтобы очистить как – samwick

+0

@samwick, так и попытаться использовать что-то еще, чтобы предоставить 'clear','


', например, выполняет задание и занимает минимальное пространство. На самом деле это выглядит нормально, если вы просто вынимаете поляны. –

1

изменение высоты обоих дивы быть такой же

<div class="announcement" style="position: relative; width: 728px; height: 200px;"> <!--This is the containing div position: relative to flow in sequence with the rest of the page.--> 


    <div class="announcement" style="position: relative; width: 728px; height: 200px;"> 
    <div style="position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure;"> 
position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height) 
    </div> 

, например, зафиксирует высоту этого Div не имеет значения, если есть одна строка в DIV или 5 строк или любой другой эта высота будет оставаться одна и та же.

PK

+0

@Pavan, пожалуйста, прочитайте [edit help] (http://stackoverflow.com/editing-help), чтобы узнать, как отформатировать ваш код. –

+0

благодарим вас за то, что помог мне улучшить себя. не могли бы вы рассказать мне, что мне нужно делать? я посмотрел на вашу ссылку, но я был невежественным с точки зрения того, что мне нужно делать? do i put html code, если я хочу, чтобы код html появлялся? извините, я не понимаю – Pavan

+0

@Pavan: Просто выберите свой код и используйте кнопку форматирования кода 1010 прямо над областью редактирования. – casablanca

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