html - CSS - 具有相同高度、设置宽度和垂直对齐方式的列

Question

我正在尝试创建两列相同的高度，但设置了 % 宽度。

其中一列的文本应垂直对齐。我尝试使用 display: table-cell 但无法正确设置 width。

这张图片显示了我正在努力实现的目标:

有什么想法吗？

Answer 1

您可以使用 CSS Flexbox。看看下面的片段:

.box {
  display: flex;
  align-items: center;
}

.box img {
  flex: 0.6;
}

.box .text {
  flex: 0.4;
}

<div class="box">
  <img src="http://placehold.it/200x300" alt="" />
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi quis hic suscipit recusandae ad veritatis dolorem expedita placeat rerum architecto provident ipsa, consequuntur, assumenda vitae explicabo sapiente laboriosam cum cupiditate.</div>
</div>

希望这对您有所帮助!