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

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

以下是我所拥有的：

HTML:

图片：

您可以使用flexbox：

.container{
显示器：flex；
证明内容：之间的空间；
}
.货柜组{
宽度：100%；
填充物：5px；
边框：1px纯黑；
}

1.
2.
3.

您可以使用flexbox：

.container{
显示器：flex；
证明内容：之间的空间；
}
.货柜组{
宽度：100%；
填充物：5px；
边框：1px纯黑；
}

1.
2.
3.

您可以使用网格：

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

在网格中，您可以划分网格。

---

*不适用于ie11之类的旧浏览器首先，width:available是无效属性。如果要使用所有可用空间，应设置宽度：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>

body，html{
宽度：100%；
身高：100%；
保证金：0；
}
.集装箱{
宽度：100%；
身高：100%；
}
.左窗格{
宽度：33%；
身高：100%；
浮动：左；
背景色：玫瑰色；
边界塌陷：塌陷；
}
米德尔潘先生{
宽度：33%；
身高：100%；
浮动：左；
背景颜色：皇家蓝；
边界塌陷：塌陷；
}
.右窗格{
宽度：33%；
身高：100%；
位置：相对位置；
浮动：对；
背景颜色：黄色；
边界塌陷：塌陷；
}
测试页
测试页
测试页

首先，宽度：available不是有效属性。如果要使用所有可用空间，应设置宽度：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>

body，html{
宽度：100%；
身高：100%；
保证金：0；
}
.集装箱{
宽度：100%；
身高：100%；
}
.左窗格{
宽度：33%；
身高：100%；
浮动：左；
背景色：玫瑰色；
边界塌陷：塌陷；
}
米德尔潘先生{
宽度：33%；
身高：100%；
浮动：左；
背景颜色：皇家蓝；
边界塌陷：塌陷；
}
.右窗格{
宽度：33%；
身高：100%；
位置：相对位置；
浮动：对；
背景颜色：黄色；
边界塌陷：塌陷；
}
测试页
测试页
测试页

这样做可以使它们均匀显示，但不会填满整个屏幕。也许@RichardPrice说CSS正在流血是对的。所以这可以使它们平等地显示出来，但并不能填满整个屏幕。也许@RichardPrice说CSS正在流血是正确的。