Question

我要有3张彼此相邻的图像，而不要重叠。这是我尝试过的，但无济于事：

h1 {
  text-align: center;
  font-size: 80px;
  line-height: 0.5em;
}

h2 {
  text-align: center;
  font-size: 40px;
  line-height: 0.5em;
}

h3 {
  text-align: center;
  font-size: 25px;
}

.source,
.data {
  width: 100%;
}

.data .camera {
  display: inline-block;
  white-space: nowrap;
  max-width: 30%;
}

<html>

<body>
  <div id="title">

    <h1>My Webpage</h1>
    <h2>It's Totally Awesome</h2>

  </div>
  <div id="content">

    <div class="source" id="cameraFeeds">

      <h3>Camera Feeds</h3>
      <div class="data">
        <div class="camera" id="camera1">
          <img src="https://via.placeholder.com/360x240">
          <h4>Camera 1</h4>
        </div>
        <div class="camera" id="camera2">
          <img src="https://via.placeholder.com/360x240">
          <h4>Camera 2</h4>
        </div>
        <div class="camera" id="camera3">
          <img src="https://via.placeholder.com/360x240">
          <h4>Camera 3</h4>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

这些图像要么彼此重叠，要么一个低于其他两个。

这是我正在寻找的布局：

因此，每个图像都具有相同的垂直位置，并且所有三个图像彼此相邻，没有任何重叠。理想情况下，尺寸应根据设备的宽度缩放。

Answer 1

这应该有帮助：

img {
    width: 100%;
    height: auto;
}

防止图像重叠

1 个答案: