如何在div中將文本與圖像並排放置？

Question

在我的div（容器）中，我希望將長文本與圖像並排放置。 我嘗試使用float left / right無效，當我使用margin-top時效果不好，因為所有圖像/文本的高度/長度都不相同。

.containerpost{
  margin-left: 25px;
  width: 40%;
  background: white;
  margin-left: 5px;
  margin-right: auto;
  border-radius: 4px;
  border: 1px solid black;
  padding: 10px;
  margin-top: 20px;
  float: left;
  clear: both;
  overflow: hidden;
  clear: both;
}

.description{
  float: left;
  clear: both;
  word-wrap: break-word;
}
.avatar{
  float: right;
  height: 200px;
  clear: both;
  margin-top: -0%;
}

Answer 1

移除所有浮子，然后嘗試使用flexbox。 通過應用display: flex; 在容器中，其中的2個項目（圖像和帶有文本的div）將並排放置。 align-items: center規則確保它們垂直居中。

我刪除了其他似乎無關的樣式。 隨時添加您需要的內容。

 .containerpost { background: white; border-radius: 4px; border: 1px solid black; padding: 10px; display: flex; align-items: center; } .avatar { height: 200px; } 

 <div class="containerpost"> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue dolor id urna laoreet ullamcorper. Vestibulum vel metus quis ipsum blandit tincidunt.</div> <img class="avatar" src="https://picsum.photos/200" /> </div>