主页 / 问题 / 1256721
Accepted
okey
Asked:2022-03-17 00:51:12 +0000 UTC2022-03-17 00:51:12 +0000 UTC

如何使 3 个 div 恰好是一行？

  • 772

应该是这样的：

在此处输入图像描述

有一行三列。有多少没试过，中间的一张（有文字的两张图）往下滑。

.row1 {
  max-width: 800px;
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.photo {
  width: 250px;
}

.pic {
  width: 100px;
  height: 90px;
}
<div class="row1">
  <div class="u1">
    <img src="images/1.jpg" class="photo">
  </div>
  <div class="u2">
    <h4>Текст</h4>
    <img src="images/pic4.png" class="pic">
    <h4>Текст</h4>
    <img src="images/pic5.png" class="pic">
  </div>
  <div class="u3">
    <img src="images/2.jpg" class="photo">
  </div>
</div>

css

1 个回答

  1. Best Answer

    对于某些元素，尤其是标题，<h4>浏览器会设置默认缩进。如果你重置它们，那么一切都会到位。

    * {
  margin: 0;
}
.row1 {
  max-width: 800px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}

.photo {
  width: 250px;
}

.pic {
  width: 100px;
  height: 90px;
}
    <div class="row1">
  <div class="u1">
    <img src="images/1.jpg" class="photo">
  </div>
  <div class="u2">
    <h4>Текст</h4>
    <img src="images/pic4.png" class="pic">
    <h4>Текст</h4>
    <img src="images/pic5.png" class="pic">
  </div>
  <div class="u3">
    <img src="images/2.jpg" class="photo">
  </div>
</div>

    • 2

相关问题