Могу ли я не использовать табличную разметку, чтобы получить два элемента с одинаковой высотой?

ОК, поэтому я знаю, используя table для макета глубоко немодно. Но мне нужно сделать макет с двумя бок о бок элементами, один с обычной высотой, который может увеличиться, если у него более высокое содержимое, а другое - с изображением. Если первый растет выше, я хочу, чтобы изображение с ростом увеличивалось в соответствии с его высотой.Могу ли я не использовать табличную разметку, чтобы получить два элемента с одинаковой высотой?

Это то, с чем я легко справляюсь с добрым старым table. Как я могу сделать это с помощью div?

Вот что я пытаюсь сделать:

.body { 
 
    width: 748px; 
 
    margin: 20px auto; 
 
} 
 
.breaker { 
 
    margin: 20px 0; 
 
    outline: 1px solid purple; 
 
} 
 
.poll { 
 
    background: pink; 
 
    width: 248px; 
 
    height: 250px; 
 
} 
 
div.poll { 
 
    float: left; 
 
} 
 
.story { 
 
    float: right; 
 
    width: 500px; 
 
    background-size: cover; 
 
}

<div class="body"> 
 

 
    <table class="breaker"> 
 
    <tr> 
 
     <!-- This will have a variable height depending on content --> 
 
     <td class="poll"></td> 
 
     <!-- The height of this should match the height of .poll --> 
 
     <td style="width:500px;background-image:url(http://lorempixel.com/output/animals-q-c-600-200-1.jpg);background-size:cover;"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    <div class="breaker"> 
 
    <!-- This will have a variable height depending on content --> 
 
    <div class="poll"></div> 
 
    <!-- The height of this should match the height of .poll --> 
 
    <div class="story" style="background-image:url(http://lorempixel.com/output/animals-q-c-600-200-1.jpg)"> 
 
    </div> 
 
    </div> 
 

 
</div>

источник

2015-07-22 And Finally

Равная высота является одной из нативных особенностей

макета или таблицы таблиц CSS, см. Эту упрощенную демонстрацию - http://jsfiddle.net/LLy1sLhq/ – Stickers

Спасибо Pangloss. –

ответ

Применить display: table-cell обоим и удалить float.

div.poll { 
    display: table-cell; 
    /* other styles */ 
} 

.story { 
    display:table-cell; 
    /* other styles */ 
}

Working Fiddle

источник

2015-07-22 13:43:31

Просто, как это !!!! Сэр, я сделал свою кепку. –

@AndFinally Благодаря FYI вы можете полностью заменить элементы таблицы значениями свойств отображения css, такими как 'table',' table-column', 'table-row',' table-cell'. это будет лучше, если вы проверите MDN для краткой и четкой информации. –

OK спасибо Mr_Green. –

-1

Это ответ JQuery, но я на самом деле написал это вчера, так что я знаю, что это работает:

function setToTargetHeight(obj1, obj2){ 

    var targetHeight = $(obj1).innerHeight(); 

    $(obj2).css('height', targetHeight); 

}

Таким образом, в использовании было бы так:

setToTargetHeight('#theTextDiv','#theImageDiv');

Это неловко названо так, если у кого-нибудь есть предложения о том, как назвать эту функцию на этом было бы оценено.

источник

2015-07-22 13:51:01 plushyObject

Спасибо, плюшевый, я думаю, что решение CSS лучше для моего конкретного случая, но хорошо бросить это в микс. –

Могу ли я не использовать табличную разметку, чтобы получить два элемента с одинаковой высотой?

ответ

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