如何将网页屏幕水平分成3等份？答案

【问题标题】：How to split web page screen horizontally into 3 equal pieces?如何将网页屏幕水平分成3等份？
【发布时间】：2020-01-07 15:15:36
【问题描述】：

我正在尝试将屏幕水平分成 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%;
    }

图片：

【问题讨论】：

标签： html css webforms flexbox

【解决方案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>

【讨论】：

所以这可以平等地显示它们，但它不会填满整个屏幕。也许@RichardPrice 说 CSS 正在流血是正确的。

【解决方案2】：

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

在网格中，您可以划分网格。 *不适用于 ie11 等旧版浏览器

【讨论】：

【解决方案3】：

首先，width:available 不是有效属性。如果你想使用所有可用空间，你应该设置宽度：100%。无论如何，为了解决您的问题，您应该对 body 和 html 使用 height: 100% 。看这个例子：

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>

【讨论】：