Question

我正在尝试创建一个着陆页，现在我在每个框中都有占位符图像，但我试图在这些框之间添加一些空格。如何在所有创建的框之间创建空间并允许它响应？我的想法是创建一个容器并弄乱边距和填充，但它会混淆移动视图。

.twocolumn {
    width: 100%;
    background-size: cover;
    display: inline-block;
    position: relative;
}
.twocolumn2 {
    width: 50%;
    background-size: cover;
    display: inline-block;
    position: relative;
}

.onecolumn {
    width: 25%;
    display: inline-block;
    position: relative;
}

.twocolumn h2 {
    position: absolute;
    bottom: 0;
    padding: 20px 10px 10px 10px;
    margin: 0;
    font-family: passion one;
    color: #FFF;
}

.twocolumn2  h2{
    position: absolute;
    bottom: 0;
    padding: 20px 10px 10px 10px;
    margin: 0;
    font-family: passion One;
    color: #FFF;
}

.onecolumn h2 {
    position: absolute;
    bottom: 0;
    padding: 20px 10px 10px 10px;
    margin: 0;
    font-family: passion one;
    color: #FFF;
    font-size: 14px;
}


.left {
    float: left;
}

.right {
    float: right;
}

.columnimg {
    width: 100%;
}

.header {
    background: white;
    margin: 50px;
    text-align: center;
    font-family: passion one;
    font-size:5vw;
    letter-spacing: 3vw;
    
}

<div class="clearfix">
        
        <a href="#"><div class="twocolumn clearfix" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:400px;background-position:center;">
            <h2>TITLE HERE</h2>
        </div></a>
        
      <a href="#"><div class="twocolumn2 clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:400px;background-position:center;">
            <h2>TITLE HERE</h2>
        </div></a>
     
        <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;">
            <h2>TITLE HERE</h2>
        </div></a>
        
        <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center top;">
            <h2>TITLE HERE</h2>
        </div></a>
        
        <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;">
            <h2>TITLE HERE</h2>
        </div></a>
        
        <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;">
            <h2>TITLE HERE</h2>
        </div></a>

        
        <a href="#"><div class="twocolumn clearfix" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:400px;background-position:center;">
            <h2>TITLE HERE</h2>
        </div></a>
        
        <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;">
            <h2>TITLE HERE</h2>
        </div></a>
        
        <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;">
            <h2>TITLE HERE</h2>
        </div></a>
        
        <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center top;">
            <h2>TITLE HERE</h2>
        </div></a>
        
        <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;">
            <h2>TITLE HERE</h2>
            </div></a></div>

提前感谢所有帮助。

Answer 1

我不完全确定你想做什么，但是你有没有使用css-grid的具体原因？这似乎是完美的。

除此之外，你基本上必须使用填充和边距。为了不搞乱移动视图，请使用媒体查询。像这样：

@media print, screen and (min-width: 640px) {
  //this css only applies when there is at least 640px of horizontal space (common tablet width)
}

编辑：请求使用css-grid的示例:(注意：css-grid不应该替换flexbox，而是使用它。根据需要使用组合。使用给定的信息，我不能这样做） CodePen和此处的相同代码：

.wrapper {
  display: grid;
  grid-template-rows: 200px 200px auto 200px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-areas:
    "logo top-left top-right"
    "logo bottom-left bottom-right"
    "main main main"
    "bottom-row bottom-row bottom-row";
  grid-column-gap: 6px;
  grid-row-gap: 6px;
}

.logo {
  grid-area: logo;
  background-color: red;
}
.menu-top-left {
  grid-area: top-left;
  background-color: blue;
}
.menu-top-right {
  grid-area: top-right;
  background-color: blue;
}
.menu-bottom-left {
  grid-area: bottom-left;
  background-color: blue;
}
.menu-bottom-right {
  grid-area: bottom-right;
  background-color: blue;
}
.main {
  grid-area: main;
  background-color: green;
  
  height: 400px;
}
.bottom-row {
  grid-area: bottom-row;
  background-color: yellow;
}

<div class="wrapper">
  <div class="logo"></div>
  <div class="menu-top-left"></div>
  <div class="menu-top-right"></div>
  <div class="menu-bottom-left"></div>
  <div class="menu-bottom-right"></div>
  <div class="main"></div>
  <div class="bottom-row"></div>
</div>

这应解决布局问题与差距，但为了响应，您可能仍需要媒体查询。

Answer 2

我会使用Flexbox。如果你想在末端留出空间，可以将flex设置为1并将justify-content设置为space-between或space-around。

如何在此网格中的所有框之间添加相等的空格？

2 个答案: