Làm thế nào để làm cho divs cùng chiều cao?

Question

Tôi có một phụ huynh-div chứa ba số divs và tôi muốn đặt cùng chiều cao nhưng nó không hoạt động. Đầu tiên và thứ ba div chứa mỗi hình ảnh. Số thứ hai div chứa ba divs có nội dung.

Dưới đây là 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> 

Các .container có css-quy tắc display:flex;. Khi tôi áp dụng điều này cũng cho .column1, .column2 và .column3, ngắt bố cục.

Tôi đang cố gắng đạt được mức tăng và giảm chiều cao hình ảnh tùy thuộc vào .column2. Thật không may, tôi không có khả năng thay đổi HTML hoặc sử dụng JS.

Here bạn có thể thấy JS-Fiddle. Tôi đã nhận xét về các quy tắc CSS.

Rất cám ơn sự giúp đỡ của bạn!

Answer 1

Trong câu hỏi bạn đề cập rằng bạn áp dụng display:flex đến .column1, .column2 và .column3.

Thay vào đó, chỉ áp dụng điều này cho .column1 và .column3 và để lại .column2 là display:block.

Điều này sẽ giải quyết vấn đề của bạn (hoạt động trong JS-Fiddle).

Answer 2

Bạn chỉ cần áp dụng chiều cao và chiều rộng tối đa cho hình ảnh. Chúng sẽ biến dạng để phù hợp với không gian và làm cho hình ảnh của bạn trông kỳ lạ. Nếu bạn chọn hình ảnh có kích thước này, chúng sẽ trông đẹp hơn.

.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>

Answer 3

Nếu tôi hiểu đúng, bạn có thể thêm video này vào phong cách của bạn:

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

cột của bạn đã được lấp đầy với chiều cao của phụ huynh. Sử dụng các kiểu css ở trên, các hình ảnh trong này sẽ lấp đầy chiều cao div cha và về cơ bản tràn chiều rộng. Nếu bạn làm một cái gì đó khác như thiết lập chiều cao của hình ảnh đến 100% nó sẽ bóp méo hình ảnh.

Đây là câu hỏi tương tự với cùng câu trả lời (nhưng chi tiết hơn). https://stackoverflow.com/a/26967278/3366016

Answer 4

bạn có thể thêm dòng này cho hàng css

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

Answer 5

Bạn chỉ cần để xác định chiều cao và chiều rộng của hình ảnh tag.Just thêm width: 100% và chiều cao 100% cho thẻ hình ảnh.

.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>