Question

我尝试使用flexbox实现一项非常简单的任务，但是几小时后我就失败了......

我只想创建一个响应水平组件，其中左侧的图片始终为100%高度和一些灵活的宽度文字正确的。

应该很容易，但在最好的情况下，图像永远不会停止重叠......

＆＃13;

body {
  font-family: sans-serif;
}

.card {
  background: #F1F1F2;
  display: flex;
}

.card-img {
  border: 1px solid green;
}

img {
  display: block;
  height: 100%;
  width: auto;
}

.card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid blue;
}

＆＃13;

<div class="card">
  <div class="card-img">
    <img src="http://placehold.it/100x100" alt="Card image">
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

＆＃13;

Answer 1

在你的情况下，让右边的div与图像具有相同的高度是不明智的，因为：

右div的height取决于witdh。由于父div已固定width，因此右div的width取决于左div width。左侧div width取决于图片height。因此，当您更改图片height时，右侧的div height也会发生变化。现在，我认为最好的方法是为图片提供fixed尺寸。

body {
  font-family: sans-serif;
}

.card {
  background: #F1F1F2;
  display: flex;
}

.card-img {
  border: 1px solid green;
}

img {
  display: block;
  height: 130px;
  width: auto;
}

.card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid blue;
}

<div class="card">
  <div class="card-img">
    <img src="http://placehold.it/100x100" alt="Card image">
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Answer 2

＆＃13;

.card-grid{
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: 200px;
  grid-gap: 0.5em;
}
.card-grid-img img{
  max-width: 200px;
  height: 100%;
  display: block;
  width: auto;
}
.card-grid-body{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

＆＃13;

<div class="card-grid">
  <div class="card-grid-img">
    <img src="http://www.salavaux.ch/222/5_sq.jpg" alt="Card image">
  </div>
  <div class="card-grid-body">
    <h4 class="card-grid-title">Card title</h4>
    <p class="card-grid-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit. Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

＆＃13;

使用网格，您可以在高度第一列元素上添加约束。

Answer 3

使用图像容器的最小宽度。

body {
  font-family: sans-serif;
}

.card {
  background: #F1F1F2;
  display: flex;
}

.card-img {
  border: 1px solid green;
  min-width: 130px;
}

img {
  display: block;
  height: 100%;
  width: auto;
}

.card-body {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid blue;
}

<div class="card">
  <div class="card-img">
    <img src="http://placehold.it/100x100" alt="Card image">
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Answer 4

你只需要将flex属性添加到.card-img

您可以在此处了解有关flex属性的更多信息：https://www.w3schools.com/cssref/css3_pr_flex.asp

＆＃13;

body {
  font-family: sans-serif;
}

.card {
  background: #F1F1F2;
  display: flex;
}

.card-img {
  border: 1px solid green;
  display: flex; //just add this line
}

img {
  display: block;
  height: 100%;
  width: auto;
}

.card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid blue;
}

＆＃13;

<div class="card">
  <div class="card-img">
    <img src="http://placehold.it/100x100" alt="Card image">
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

＆＃13;

Flexbox - 具有全高度平方图像的水平分量

4 个答案: