如何将网页屏幕水平拆分为 3 个相等的部分？

Question

我正在尝试将屏幕水平分成 3 个相等的部分，以便我可以将单独的图像放入每个部分。我已经将屏幕稍微平均分割了，但我运行遇到了一些问题，白色 space 而不是平均分割。

这是我的资料：

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

您可以使用网格： https://css-tricks.com/snippets/css/complete-guide-grid/

在网格中，您可以划分网格。 *不适用于 ie11

等旧版浏览器

Answer 3

首先，width: available 无效属性。如果你想使用所有可用的 space 你应该设置宽度：100%。无论如何，为了解决您的问题，您应该使用 height: 100% 也用于 body 和 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>

如何将网页屏幕水平拆分为 3 个相等的部分？

How to split web page screen horizontally into 3 equal pieces?

html

css

webforms

flexbox