Question

我正在尝试使用CSS网格制作宽度相等的2x2矩形（将屏幕分成2个），但是由于某种原因，右侧的矩形正在扩大页面宽度并创建滚动条。

CSS：

.indexGridContainer{
display:grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(250px, 450px);

}
.wallets{

    position:relative;
    background-image: url(https://bellroy.imgix.net/cms_images/686/bellroy-brand-homepage-2.jpg?auto=format&fit=max);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;


}
.bags{
    position:relative;
    background-image: url(https://bellroy.imgix.net/cms_images/691/bellroy-brand-homepage-7.jpg?auto=format&fit=max);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    }

    .keys{
        position:relative;
        background-image: url( https://bellroy.imgix.net/cms_images/688/bellroy-brand-homepage-4.jpg?auto=format&fit=max);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .phonecases{
        position:relative;
        background-image: url( https://bellroy.imgix.net/cms_images/690/bellroy-brand-homepage-6.jpg?auto=format&fit=max);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
.titleBox{
    position: relative;
    top: 0;
    left: 20px;
    padding: 20px;
    z-index: 1;
}
.titleBox h1{
    font-family: 'PT serif', 'serif';
    color: #f2f2f2;
}
.titleBox h3{
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #f2f2f2;
}

HTML：

<div class="indexGridContainer">
<a  href="#" class="wallets">
<span class="titleBox">
<h1>Men's Wallets</h1>
<h3>>SLIM YOUR WALLET</h3>


</span>

</a>
<a  href="#" class="keys">
<span class="titleBox">
<h1>Key Covers</h1>
<h3>>STOP THE JANGLE</h3>


</span>

</a>
<a  href="#" class="bags">
<span class="titleBox">
<h1>Bags</h1>
<h3>>Merge work and Play into one</h3>


</span>

</a>
<a  href="#" class="phonecases">
<span class="titleBox">
<h1>Phone Cases</h1>
<h3>>Streamline your phone and wallet.</h3>


</span>

</a>


</div>

codepen：

https://codepen.io/anon/pen/bOXooP

.indexGridContainer是否有问题？是repeat（2,1fr）;分割屏幕宽度50％的方法是错误的吗？

谢谢

Answer 1

问题是.titlebox的属性为left: 20px，当其宽度为页面宽度的50％时，会在右侧引起空白。减小其宽度，或者如果您很懒，请添加以下CSS来解决该问题：

body {
    overflow-x: hidden;
}

Answer 2

您正在使用span作为不正确的块元素的容器。您需要改用div并考虑使用margin来创建空间而不调整位置，因为如果从左侧推动元素，则只会在右侧创建溢出。

如果您想覆盖所有屏幕，也不要忘记删除默认的边框：

body {
 margin:0;
}

.indexGridContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(250px, 450px);
}
.indexGridContainer > a {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.wallets {
  background-image: url(https://bellroy.imgix.net/cms_images/686/bellroy-brand-homepage-2.jpg?auto=format&fit=max);
}

.bags {
  background-image: url(https://bellroy.imgix.net/cms_images/691/bellroy-brand-homepage-7.jpg?auto=format&fit=max);
}

.keys {
  background-image: url(https://bellroy.imgix.net/cms_images/688/bellroy-brand-homepage-4.jpg?auto=format&fit=max);
}

.phonecases {
  background-image: url(https://bellroy.imgix.net/cms_images/690/bellroy-brand-homepage-6.jpg?auto=format&fit=max);
}

.titleBox {
  margin-left: 20px;
  padding: 20px;
}

.titleBox h1 {
  font-family: 'PT serif', 'serif';
  color: #f2f2f2;
}

.titleBox h3 {
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f2f2f2;
}

<div class="indexGridContainer">
  <a href="#" class="wallets">
    <div class="titleBox">
      <h1>Men's Wallets</h1>
      <h3>>SLIM YOUR WALLET</h3>
    </div>
  </a>
  <a href="#" class="keys">
    <div class="titleBox">
      <h1>Key Covers</h1>
      <h3>>STOP THE JANGLE</h3>
    </div>

  </a>
  <a href="#" class="bags">
    <div class="titleBox">
      <h1>Bags</h1>
      <h3>>Merge work and Play into one</h3>
    </div>

  </a>
  <a href="#" class="phonecases">
    <div class="titleBox">
      <h1>Phone Cases</h1>
      <h3>>Streamline your phone and wallet.</h3>
    </div>
  </a>

</div>

带有背景图像的CSS网格50％分隔宽度单元格不适合屏幕

2 个答案: