Question

我目前正在进行一些布局，并且在应用CSS网格规则时图像宽度超过容器宽度存在问题。

请看下面的代码。

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page {
  display: grid;
  grid-template-columns: auto minmax(300px, 400px);
  grid-column-gap: 1rem;
  height: 100vh;
}

.content {
  grid-column: 1 / 2;
  background: red;
  width: 100%;
}

.sidebar {
  grid-column: 3;
  background: lime;
}

<div class="page">
  <div class="content">
    <img src="http://via.placeholder.com/900x400" alt="" width="900" height="400">
    <p>content</p>
  </div>
  <div class="sidebar">
    <p>sidebar</p>
  </div>
</div>

我想知道可能导致这个问题的原因。侧边栏必须介于300px和400px之间。内容容器应该采取其余的。出于某种原因，图像打破了这种布局设置。

https://codepen.io/sunpietro/pen/ZyNgqe

Answer 1

修正<section style="margin-bottom:70px"> <nav-menu></nav-menu> </section> <section> <router-outlet></router-outlet> </section> <section> <foot></foot> </section>。它应grid-template-columns。 be grid-template-columns: auto 1fr minmax(300px, 400px)用于图片，auto用于1fr，content侧边栏（位于第3列）。演示：

＆＃13;

minmax(300px, 400px) for

＆＃13;

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page {
  display: grid;
  grid-template-columns: auto 1fr minmax(300px, 400px);
  grid-column-gap: 1rem;
  height: 100vh;
}

.content {
  grid-column: 1 / 2;
  background: red;
  width: 100%;
}

.sidebar {
  grid-column: 3;
  background: lime;
}

＆＃13;

Answer 2

你有一个双列网格。

grid-template-columns: auto minmax(300px, 400px);

这意味着有三个网格列线：1,2和3。

图像嵌套在占据第一列的网格项中：

.content {
   grid-column: 1 / 2;
}

但是你有侧边栏跳过第二列并从网格第3行开始（显式网格的结尾）：

.sidebar {
  grid-column: 3;
}

这分解为：

grid-column-start: 3;
grid-column-end: auto;

所以第二栏中没有任何内容。

请改为尝试：

.sidebar {
    grid-column: 2 / 3;
}

revised codepen

使用CSS网格功能时，图像宽度超出容器宽度

2 个答案: