如何将网页屏幕水平分成三等份？

Question

我试图将屏幕水平分成 3 个相等的部分，这样我就可以将单独的图像放入每个部分中。我已经稍微平均地分割了屏幕，但是我遇到了一些空白问题并且没有被平均分割。

这是我所拥有的：

HTML：

    <div class="split left">
        <div class="centered">
            <img src="img_avatar2.png" alt="Avatar woman">
        </div>
    </div>

    <div class="split center">
        <div class="centered">
            <img src="img_avatar.png" alt="Avatar man">
        </div>
    </div>

    <div class="split right">
        <div class="centered">
            <img src="golf_course.jpg" alt="Finished Terrain Golf Course">
        </div>
    </div>

CSS：

    <div class="split left">
        <div class="centered">
            <img src="img_avatar2.png" alt="Avatar woman">
        </div>
    </div>

    <div class="split center">
        <div class="centered">
            <img src="img_avatar.png" alt="Avatar man">
        </div>
    </div>

    <div class="split right">
        <div class="centered">
            <img src="golf_course.jpg" alt="Finished Terrain Golf Course">
        </div>
    </div>

图像：

Answer 1

您可以使用弹性盒：

.container {
  display: flex;
  justify-content: space-between;
}
.container div {
  width: 100%;
  padding: 5px;
  border: 1px solid black;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>