Question

我的要求是，我希望所有文字类div都应该具有相同的高度，或者应该占据父div列的所有高度。

＆＃13;

.flexbox {
  display: flex;
}

.col {
  border: 1px solid;
  margin: 20px;
}

.text {
  background: green;
}

＆＃13;

<div class="flexbox">
  <div class="col">
    <div class="img" style="background:red;height:200px;width:200px;"></div>
    <div class="text">
      <h3>I am listed first in source order.</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
  </div>
  <div class="col">
    <div class="img" style="background:red;height:200px;width:200px;"></div>
    <div class="text">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </div>
  </div>
  <div class="col">
    <div class="img" style="background:red;height:200px;width:200px;"></div>
    <div class="text">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
  </div>
</div>

＆＃13;

Here is the link for working code

Answer 1

我猜你想要绿色文字覆盖div的其余部分。那么你需要设置.text的高度，具体取决于div内的剩余空间。

这取决于img高度。在您的示例中，图像的高度为200px。

如果高度是动态的，则需要使用javascript或jQuery之类的东西。如果不是（它们具有固定的高度），您可以仅使用CSS，如下例所示，使用calc()计算.text的高度，从父级的总高度中减去图像高度（{ {1}}）

.col =身高100% .col =身高200px

img

.flexbox {
  display: flex;
}
h3,p {
	margin-top:0
}
.col {
  border: 1px solid;
  margin: 20px;
}

.text {
  background: green;
	height:calc(100% - 200px)
}

Answer 2

您需要在父div上使用flex-direction: column，在子div上使用flex: 1。

因此，您的.col课程添加：

display: flex;
flex-direction: column;

到.text班级添加：

flex:1;

＆＃13;

.flexbox {
  display: flex;
}

.col {
  border: 1px solid;
  margin: 20px;
  display: flex;
  flex-direction: column
}

.text {
  background: green;
  flex: 1;
}

＆＃13;

<div class="flexbox">
  <div class="col">
    <div class="img" style="background:red;height:200px;width:200px;"></div>
    <div class="text">
      <h3>I am listed first in source order.</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
  </div>
  <div class="col">
    <div class="img" style="background:red;height:200px;width:200px;"></div>
    <div class="text">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </div>
  </div>
  <div class="col">
    <div class="img" style="background:red;height:200px;width:200px;"></div>
    <div class="text">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
  </div>
</div>

＆＃13;

Here is the fiddle to play with.

希望这有帮助。

使用flexbox时，子div高度应等于其父高度

2 个答案: