Question

我正在CSS网格中设置视频播放器，并且我一生无法弄清楚为什么在添加文本内容时最右边的网格列（一个带有三行彩色行）的宽度会增加。 / p>

我尝试将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>

为什么文本内容使列变宽？

3 个答案: