Jak zrobić divy tej samej wysokości?

Mam jeden element nadrzędny-div, który zawiera trzy divs i chciałbym, aby były one tej samej wysokości, ale to nie działa. Pierwszy i trzeci div zawiera każdy obraz. Drugi div zawiera trzy divs z zawartością.Jak zrobić divy tej samej wysokości?

Oto 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 ma CSS reguły display:flex;. Gdy zastosuję to również do .column1, .column2 i .column3, układ zostanie zerwany.

Próbuję osiągnąć, że wzrost i zmniejszenie wysokości obrazu zależą od .column2. Niestety nie mam możliwości zmiany kodu HTML ani użycia JS.

Here widać JS-Fiddle. Skomentowałem zasady CSS.

Dziękujemy za pomoc!

Źródło

2016-10-18 dahlsdata-tahira

Możliwe duplikat [tej kwestii] (http://stackoverflow.com/questions/39031962/child-divs-height-isnt-the-same-as-parent-div/39032193#39032193). Sprawdź moją odpowiedź [pod tym linkiem] (http://stackoverflow.com/a/39032193/6386166).Mam nadzieję, że to pomoże :) –

Twój kod działa dobrze –

Wysokości trzech dzieci "flexbox" są równe w powyższym kodzie (ponieważ "wyrównaj elementy: rozciągnij" jest domyślnie ... spróbuj dopasować obrazy, zobacz [a odniesienie tutaj] (http://stackoverflow.com/questions/39289576/css-image-resize-issue/39289947#39289947) – kukkuz

W pytaniu, o którym wspomniałeś, że złożysz wniosek: display:flex to .column1, .column2 i .column3.

Zamiast tego zastosuj to do .column1 i .column3 i pozostaw .column2 jako display:block.

To powinno rozwiązać twój problem (działa w twoim JS-Fiddle).

Źródło

2016-10-18 11:39:09 apb21

Trzeba tylko zastosować wysokość i szerokość maksymalną do obrazów. Będą zniekształcać, aby dopasować się do przestrzeni i sprawiać, że twoje obrazy będą wyglądać dziwnie. Jeśli wybierzesz obrazy o takich wymiarach, będą wyglądać lepiej.

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

Źródło

2016-10-18 11:40:32 Tom

Jeśli mam zrozumieć właściwie można dodać to do swoich stylów:

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

Twoje kolumny są już napełniania do wysokości nadrzędnej. Przy użyciu powyższych stylów CSS obrazy w ten sposób wypełnią wysokość div elementu nadrzędnego i zasadniczo przekroczą szerokość. Jeśli zrobisz coś innego, jak ustawiona wysokość obrazów na 100%, zniekształcisz obraz.

Oto podobne pytanie z tą samą (ale bardziej szczegółową) odpowiedzią. https://stackoverflow.com/a/26967278/3366016

Źródło

2016-10-18 11:53:54 user3366016

Możesz dodać wiersze dla rzędu css

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

Źródło

2016-10-18 11:59:23 Surendra

Trzeba tylko określić wysokość i szerokość obrazu tag.Just dodać width: 100% i wysokości 100% dla tagu obrazu.

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

Źródło

2016-10-18 12:50:19

Jak zrobić divy tej samej wysokości?

Odpowiedz

Powiązane problemy