Как сделать divs одинаковой высоты?

У меня есть один родительский div, который содержит три divs, и я хотел бы сделать их одинаковой высоты, но он не работает. Первый и третий div содержат каждое изображение. Второй div содержит три divs с контентом.Как сделать divs одинаковой высоты?

Вот HTML:

<div class="container"> 
    <div class="column1"> 
     <img src="http://placehold.it/300x318"> 
    </div> 

    <div class="column2"> 
     <div class="row1"> 
      <div class="text">UNIKE GUSTAVIANSKE STILMØBLER.</div> 
      <div class="text">VI SELGER HÅNDVERK ETTER 1700-</div> 
      <div class="text">OG 1800-TALLS TRADISJONER.</div> 
     </div> 
     <div class="row2"></div> 
     <div class="row3"> 
      <div class="text"> 
       Åpningstider:<br> 
       Man - Fre 11 -17  Lør 11- 15 
      </div> 
     </div> 
    </div> 

    <div class="column3"> 
     <img src="http://placehold.it/300x318"> 
    </div> 
</div>

.container имеет CSS-правила display:flex;. Когда я применяю это также к .column1, .column2 и .column3, разрывы компоновки.

Я стараюсь, чтобы увеличение и уменьшение высоты изображения зависело от .column2. К сожалению, у меня нет возможности изменить HTML или использовать JS.

Here вы можете увидеть JS-Fiddle. Я прокомментировал CSS-правила.

Большое спасибо за вашу помощь!

источник

2016-10-18 dahlsdata-tahira

Возможный дубликат [этот вопрос] (http://stackoverflow.com/questions/39031962/child-divs-height-isnt-the-same-as-parent-div/39032193#39032193). Пожалуйста, проверьте мой ответ [в этой ссылке] (http://stackoverflow.com/a/39032193/6386166).Надеюсь, это поможет :) –

Ваш код работает нормально –

высоты трех детей «flexbox» равны в вашем коде выше (потому что 'align-items: stretch' по умолчанию ... попробуйте настроить изображения, см. [A ссылка здесь] (http://stackoverflow.com/questions/39289576/css-image-resize-issue/39289947#39289947) – kukkuz

В вопросе упоминается, что вы применили display:flex к .column1, .column2 и .column3.

Вместо этого примените это только к .column1 и .column3 и оставьте .column2 как display:block.

Это должно решить вашу проблему (работает в JS-Fiddle).

источник

2016-10-18 11:39:09 apb21

Вам просто нужно применить высоту и максимальную ширину к изображениям. Они будут искажаться, чтобы вписаться в пространство и сделать ваши изображения странными. Если вы выберете изображения, которые являются такими размерами, они будут выглядеть лучше.

.container { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 
.container img{ 
 
    height: 100%; 
 
    max-width: 100%; 
 
} 
 

 
.row1 { 
 
    background-color: #fff; 
 
    padding-top: 40px; 
 
} 
 
.row1 .text { 
 
    font-size: 30px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    font-weight: 300; 
 
} 
 
.row2 { 
 
    height: 150px; 
 
    background-color: #e4e8eb; 
 
} 
 
.row3 { 
 
    background-color: #c7cacf; 
 
    padding: 10px 0px; 
 
} 
 
.row3 .text { 
 
    font-size: 25px; 
 
    text-align: center; 
 
    line-height: 25px; 
 
}

<div class="container"> 
 
    <div class="column1"> 
 
    <img src="http://placehold.it/300x318"> 
 
    </div> 
 

 
    <div class="column2"> 
 
    <div class="row1"> 
 
     <div class="text"> 
 
     UNIKE GUSTAVIANSKE STILMØBLER.</div> 
 
     <div class="text">VI SELGER HÅNDVERK ETTER 1700-</div> 
 
     <div class="text">OG 1800-TALLS TRADISJONER. 
 
     </div> 
 
    </div> 
 
    <div class="row2"></div> 
 
    <div class="row3"> 
 
     <div class="text">Åpningstider: 
 
     <br>Man - Fre 11 -17 Lør 11- 15</div> 
 
    </div> 
 
    </div> 
 

 
    <div class="column3"> 
 
    <img src="http://placehold.it/300x318"> 
 
    </div> 
 
</div>

источник

2016-10-18 11:40:32 Tom

Если я правильно понять вы можете добавить это в ваших стилях:

img { 
    display: block; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

Ваши колонки уже наполнялась к родительскому высоте. Используя приведенные выше стили CSS, изображения в этом заполнят родительскую высоту div и в основном переполняют ширину. Если вы сделаете что-то еще, например, установите высоту изображений на 100%, это исказит изображение.

Здесь аналогичный вопрос с таким же (но более подробным) ответом. https://stackoverflow.com/a/26967278/3366016

источник

2016-10-18 11:53:54 user3366016

вы можете добавить эти строки для строк CSS

.row { 
    display: flex; 
    justify-content: center; /* align horizontal */ 
    align-items: center; 
}

источник

2016-10-18 11:59:23 Surendra

Вам просто нужно указать ширину и высоту изображения tag.Just добавить ширина: 100% и высота 100% для тега изображения.

.container { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 
.container img{ 
 
    height: 100%; 
 
    max-width: 100%; 
 
} 
 

 
.row1 { 
 
    background-color: #fff; 
 
    padding-top: 40px; 
 
} 
 
.row1 .text { 
 
    font-size: 30px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    font-weight: 300; 
 
} 
 
.row2 { 
 
    height: 150px; 
 
    background-color: #e4e8eb; 
 
} 
 
.row3 { 
 
    background-color: #c7cacf; 
 
    padding: 10px 0px; 
 
} 
 
.row3 .text { 
 
    font-size: 25px; 
 
    text-align: center; 
 
    line-height: 25px; 
 
} 
 
.imgsize{ 
 
width: 100%; 
 
height: 100%; 
 
}

<div class="container"> 
 
    <div class="column1"> 
 
    <img src="http://placehold.it/300x318" class="imgsize"> 
 
    </div> 
 

 
    <div class="column2"> 
 
    <div class="row1"> 
 
     <div class="text"> 
 
     UNIKE GUSTAVIANSKE STILMØBLER.</div> 
 
     <div class="text">VI SELGER HÅNDVERK ETTER 1700-</div> 
 
     <div class="text">OG 1800-TALLS TRADISJONER. 
 
     </div> 
 
    </div> 
 
    <div class="row2"></div> 
 
    <div class="row3"> 
 
     <div class="text">Åpningstider: 
 
     <br>Man - Fre 11 -17 Lør 11- 15</div> 
 
    </div> 
 
    </div> 
 

 
    <div class="column3"> 
 
    <img src="http://placehold.it/300x318" class="imgsize"> 
 
    </div> 
 
</div>

источник

2016-10-18 12:50:19

Как сделать divs одинаковой высоты?

ответ

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