Как разделить экран веб-страницы по горизонтали на 3 равных части?

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:

/* Split the screen into thirds*/
.split {
    height: 100%;
    width: 33.3333%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    padding-top: 20px;
}

/* Control the left side */
.left {
    left: 0;
    background-color: #111;
}

/* Control the right side */
.right {
    right: 0;
    background-color: red;
}

.center {
    right:auto;
    left:auto;
    background-color:wheat;
}

/* If you want the content centered horizontally and vertically */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

    /* Style the image inside the centered container, if needed */
    .centered img {
        width: 150px;
        border-radius: 50%;
    }

Изображение:

Answer 1

Вы можете использовать flexbox:

.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>

Answer 2

Во-первых, ширина: доступное недопустимое свойство. если вы хотите использовать все доступное пространство, вы должны установить ширину: 100%. в любом случае, для решения вашей проблемы вы должны использовать рост: 100% также для тела и html. см. этот пример:

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}
.container {
  width: 100%;
  height: 100%;
}
.leftpane {
    width: 33%;
    height: 100%;
    float: left;
    background-color: rosybrown;
    border-collapse: collapse;
}
.middlepane {
    width: 33%;
    height: 100%;
    float: left;
    background-color: royalblue;
    border-collapse: collapse;
}
.rightpane {
  width: 33%;
  height: 100%;
  position: relative;
  float: right;
  background-color: yellow;
  border-collapse: collapse;
}

<div class="container">
  <div class="leftpane">
    <h1>Test Page</h1></div>
  <div class="middlepane">Test Page</div>
  <div class="rightpane">
    <h1>Test Page</h1></div>
</div>

Answer 3

Вы можете использовать сетку: https://css-tricks.com/snippets/css/complete-guide-grid/

в сетке вы можете разделить вашу сетку. * не работает со старыми браузерами, такими как ie11