Question

我有一个包含三个divs的父级div，我想让它们的高度相同，但它不起作用。第一个和第三个div包含每个图像。第二个div包含三个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-rule display:flex;。当我将其应用于.column1，.column2和.column3时，布局也会中断。

我试图实现图像高度的增加和减少取决于.column2。不幸的是，我无法更改HTML或使用JS。

Here你可以看到JS-Fiddle。我已经注释掉了CSS规则。

非常感谢你的帮助！

Answer 1

在您提到的问题中，您将display:flex应用于.column1，.column2和.column3。

而是将其应用于.column1和.column3，并将.column2保留为display:block。

这可以解决你的问题（适用于你的JS-Fiddle）。

Answer 2

您只需要为图像应用高度和最大宽度。它们会扭曲以适应空间并使您的图像看起来很奇怪。如果选择具有此尺寸的图像，它们看起来会更好。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果我理解正确，你可以将它添加到你的风格中：

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

您的列已填充到父级高度。使用上面的css样式，这里的图像将填充父div高度并基本上溢出宽度。如果您执行其他操作，例如将图像的高度设置为100％，则会使图像失真。

这是一个类似的问题，答案相同（但更详细）。 https://stackoverflow.com/a/26967278/3366016

Answer 4

您可以为行css添加此行

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

Answer 5

您只需指定图片标记的高度和宽度。只需为图片标记添加宽度：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>

如何使div高度相同？

5 个答案: