html - 在 flexbox 中使图像和文本大小相同

Question

所以基本上我想在左边显示一些图片，在右边显示一些内容，同时使用 flexbox 使它们具有相同的高度。

结果应如下所示：

#div1 {
  width: 100%;
  background-color: black;
  color: white;
  overflow: auto;
  font-size: 1vmax;
  display: flex;
  align-items: center;
}

#div2 {
  padding: 1%;
  display: flex;
  align-items: center;
  flex: 1;
}

#div3 {
  padding: 1%;
  text-align: center;
  white-space: nowrap;
  width: max-content;
}

<div id="div1">
  <div id="div2">
    <!-- Some very big pictures -->
    <img src="https://via.placeholder.com/1000/" height="50em" />
    <img src="https://via.placeholder.com/1000/" height="50em" />
    <img src="https://via.placeholder.com/1000/" height="50em" />
    <img src="https://via.placeholder.com/1000/" height="50em" />
    <img src="https://via.placeholder.com/1000/" height="50em" />
  </div>
  <div id="div3"><span>Line 1</span><br /><span>Line 2</span></div>
</div>

但是，您可以看到，在这种情况下，图片的高度是手动设置的，并且与右侧的两行内容的高度不同。

我希望我能做这样的事情：

#div1 {
  width: 100%;
  background-color: black;
  color: white;
  overflow: auto;
  font-size: 1vmax;
  display: flex;
  align-items: center;
}

#div2 {
  padding: 1%;
  display: flex;
  align-items: center;
  flex: 1;
}

#div3 {
  padding: 1%;
  text-align: center;
  white-space: nowrap;
  width: max-content;
}

<div id="div1">
  <div id="div2">
    <!-- Some very big pictures -->
    <img src="https://via.placeholder.com/1000/" height="1em" />
    <img src="https://via.placeholder.com/1000/" height="1em" />
    <img src="https://via.placeholder.com/1000/" height="1em" />
    <img src="https://via.placeholder.com/1000/" height="1em" />
    <img src="https://via.placeholder.com/1000/" height="1em" />
  </div>
  <div id="div3"><span>Line 1</span><br /><span>Line 2</span></div>
</div>

但显然将图像的高度设置为1em超小。

任何想法如何实现这一目标？

标签： htmlcssflexbox

Answer 1

您应该使用图像宽度而不是高度，也应该使用 justify-content 到父 div

.main-container{
     justify-content:space-between;
}

如果你想根据 div 高度垂直居中

height: 100%;
display:flex;
flex-direction: column;
justify-content: center;

.main-container{
  width:100%;
  background-color:black;
  color:white;
  overflow:auto;
  font-size:1vmax;
  display:flex;
  justify-content: space-between;
  align-items:center;
}
.images-container{
  display:flex;
  align-items:center;
  padding: 1%;
}
.images-container img{
  width: 50px;
}
.text-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1%;
}

<div class="main-container">
  <div class="images-container">
  <!-- Some very big pictures -->
    <img src="https://via.placeholder.com/1000/" />
    <img src="https://via.placeholder.com/1000/" />
    <img src="https://via.placeholder.com/1000/" />
    <img src="https://via.placeholder.com/1000/" />
    <img src="https://via.placeholder.com/1000/" />
  </div>
  <div class="text-container">
    <span>Line 1</span><br /><span>Line 2</span>
  </div>
</div>