为什么文本内容会使栏目变宽？

Question

我正在CSS网格中设置一个视频播放器，我一直都搞不明白为什么当我添加文本内容时，最右边的网格列(一个有三个多色的行)的宽度会增加。

我已尝试将overflow属性设置为hidden，但宽度仍然更改。

如果我从html标记中删除以下代码，该列将恢复到所需的宽度：

<div id="title">This Text</div>
<div id="location">is making this 3 row div</div>
<div id="date">wider for some reason</div>

我想在不改变宽度的情况下向列中添加文本。可能是个简单的解决方法。谢谢你的帮助！

https://codepen.io/Wcomp/pen/LKMrRK?editors=1100

​

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

*:focus {
  outline: 0;
  outline: none;
  user-select: none;
}

* {
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  display: block;
  overflow: hidden;
  height: 100vh;
  background-color: darkblue;
}

.middle {
  display: grid;
  grid-template-areas: 'item1 item1 item1 item1 item2';
  grid-column-gap: 3vh;
  position: absolute;
  width: 100%;
  top: 23.3333666667%;
  height: 53.3332667%;
  border-left: 3vh solid transparent;
  border-right: 3vh solid transparent;
}

.vid_player {
  display: grid;
  background-color: green;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 3vh;
  left: 0%;
  height: 100%;
  width: 100%;
  grid-area: item1;
}

.item {
  background-color: white;
  height: 100%;
  width: 100%;
  border-radius: 10px;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  width: 100%;
  background-color: grey;
  grid-area: item2;
}

#one {
  background-color: aqua;
}

#two {
  background-color: red;
}

#three {
  background-color: yellow;
}

#title {
  color: white;
  font-family: arial;
  font-size: 50px;
  text-align: center;
}

#location {
  color: white;
  font-family: arial;
  font-size: 30px;
  text-align: center;
}

#date {
  color: white;
  font-family: arial;
  font-size: 30px;
  text-align: center;
}

<div class="middle">

  <div class="vid_player">

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>



  </div>

  <div class="container">

    <div id="one">

      <div id="title">This Text</div>
      <div id="location">is making this 3 row div</div>
      <div id="date">wider for some reason</div>

    </div>

    <div id="two"></div>
    <div id="three"></div>

  </div>

</div>

​

Answer 1

如果您将grid-template-columns: 1fr 1fr 1fr 1fr 1fr;添加到您的.middle类中，是否会给出预期的结果？

Answer 2

通过将所有列设置为1fr宽度，您告诉浏览器让它们占用相同数量的页面上剩余的空间。也就是说，在您的内容填充的列占用了它们所需的空间之后留下的空间。

如果您希望列占用相同的空间量，请尝试在vw units中给列宽度，使它们的宽度成为屏幕的一部分，或给百分比，使它们的宽度成为父列宽度的一部分。

Answer 3

下面是如何定义主网格容器的方法：

.middle {
  display: grid;
  grid-template-areas: 'item1 item1 item1 item1 item2';
}

您已经创建了一个包含五列的轴网。

但是，您还没有为这些列指定宽度。换句话说，您还没有为grid-template-columns定义任何值。

因此，每个列默认为其内容的宽度。

因为有问题的列有文本内容，所以与其他列不同，它更宽。

设置宽度相等的规则。将以下代码添加到您的代码中：

.middle {
  display: grid;
  grid-template-areas: 'item1 item1 item1 item1 item2';
  grid-template-columns: repeat(5, 1fr); /* new */
}

revised codepen

​

.middle {
  display: grid;
  grid-template-areas: "item1 item1 item1 item1 item2";
  grid-template-columns: repeat(5, 1fr); /* new */
  grid-column-gap: 3vh;
  position: absolute;
  width: 100%;
  top: 23.3333666667%;
  height: 53.3332667%;
  border-left: 3vh solid transparent;
  border-right: 3vh solid transparent;
}

.vid_player {
  display: grid;
  background-color: green;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 3vh;
  left: 0%;
  height: 100%;
  width: 100%;
  grid-area: item1;
}

.item {
  background-color: white;
  height: 100%;
  width: 100%;
  border-radius: 10px;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  width: 100%;
  background-color: grey;
  grid-area: item2;
}

#one {
  background-color: aqua;
}

#two {
  background-color: red;
}

#three {
  background-color: yellow;
}

#title {
  color: white;
  font-family: arial;
  font-size: 50px;
  text-align: center;
}

#location {
  color: white;
  font-family: arial;
  font-size: 30px;
  text-align: center;
}

#date {
  color: white;
  font-family: arial;
  font-size: 30px;
  text-align: center;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

*:focus {
  outline: 0;
  outline: none;
  user-select: none;
}

* {
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  display: block;
  overflow: hidden;
  height: 100vh;
  background-color: darkblue;
}

<div class="middle">
  <div class="vid_player">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="container">
    <div id="one">
      <div id="title">This Text</div>
      <div id="location">is making this 3 row div</div>
      <div id="date">wider for some reason</div>
    </div>
    <div id="two"></div>
    <div id="three"></div>
  </div>
</div>

​