如何在flex属性下完美地容纳内容？

时间：2019-05-27 01:26:09

标签： html css css3 flexbox gallery

我有2个分别名为.grid.left和.grid.right的容器。每个.grids，尤其是.grid.left都有一些动态图像，而这些.grids由另一个称为.gallery的div包裹。

问题是，当我给每个图像框留出空白时，浏览器会在.gallery内部产生一些缝隙，如下所示：

enter image description here

我的期望是摆脱.gallery与我之间的差距，并使图像完全适合，无论我在图像上设置margins多少。

我打算给画廊的margins看起来更好。我想保留这些边距，并仅将.grid.right的图像扩展到图像和.outer div之间。

有没有解决此问题的适当方法？

CodePen

摘要：

* {
  margin: 0;
  padding: 0;
}

div,
section {
  position: relative;
}

.gallery {
  width: 1200px;
  height: 100%;
  border: 1px solid black;
  box-sizing: border-box;
}

.article {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.grid {
  height: 100%;
}

.left {
  width: 60%;
}

.inset-contents {
  width: 100%;
  height: 50%;
}

.top {
  margin-bottom: 1rem;
  background-image: url('https://imgur.com/3ozQvk9.jpg');
  padding-bottom: 50%;
}

.bottom {
  display: flex;
  flex-flow: row;
}

.inner-contents {
  width: 50%;
}

.first {
  background-image: url('https://imgur.com/tOMRVDi.jpg');
  padding-bottom: 50%;
  margin-right: .5rem;
}

.second {
  background-image: url('https://imgur.com/4oewNdx.jpg');
  padding-bottom: 50%;
  margin-left: .5rem;
}

.right {
  width: 40%;
  background-image: url('https://imgur.com/7gB1jHR.jpg');
  padding-bottom: 60%;
  align-content: stretch;
  margin-left: 1rem;
}

.img {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
<div class="gallery">
  <div class="article">
    <div class="grid left">
      <a class="inset-contents top img"></a>
      <div class="inset-contents bottom">
        <a class="inner-contents first img"></a>
        <a class="inner-contents second img"></a>
      </div>
    </div>
    <a class="grid right img"></a>
  </div>
</div>

3 个答案:

答案 0 :(得分：1)

问题是如何管理图片库中right元素的高度：

  • 忽略设置height: 100%（由于grid类）和padding-bottom-您可以通过向height: auto元素添加right来覆盖此设置，

  • 从align-items: center元素中删除article并允许默认的align-items: stretch接管-这将拉伸并匹配{ right的{​​1}}元素。

请参见下面的演示

left
* {
  margin: 0;
  padding: 0;
}

div,
section {
  position: relative;
}

.gallery {
  width: 1200px;
  height: 100%;
  border: 1px solid black;
  box-sizing: border-box;
}

.article {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
  /*align-items: center;*/
}

.grid {
  height: 100%;
}

.left {
  width: 60%;
}

.inset-contents {
  width: 100%;
  height: 50%;
}

.top {
  margin-bottom: 1rem;
  background-image: url('https://imgur.com/3ozQvk9.jpg');
  padding-bottom: 50%;
}

.bottom {
  display: flex;
  flex-flow: row;
}

.inner-contents {
  width: 50%;
}

.first {
  background-image: url('https://imgur.com/tOMRVDi.jpg');
  padding-bottom: 50%;
  margin-right: .5rem;
}

.second {
  background-image: url('https://imgur.com/4oewNdx.jpg');
  padding-bottom: 50%;
  margin-left: .5rem;
}

.right {
  width: 40%;
  background-image: url('https://imgur.com/7gB1jHR.jpg');
  /*padding-bottom: 60%;
  align-content: stretch; */
  margin-left: 1rem;
  height: auto; /* added */
}

.img {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

答案 1 :(得分：1)

找到了解决方案。根据{{​​3}}的文章，我需要像这样在flex-shrink: 0;中添加.right：

  * {
    margin: 0;
    padding: 0;
  }
  div, section {
    position: relative;
  }
  .gallery {
    width: 1200px;
    height: 100%;
    border: 1px solid black;
    box-sizing: border-box;
  }
  .article {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .grid {
    height: 100%;
  }
  .left {
    width: 60%;
  }
  .inset-contents {
    width: 100%;
    height: 50%;
  }
  .top {
    margin-bottom: 1rem;
    background-image: url('https://imgur.com/3ozQvk9.jpg');
    padding-bottom: 50%;
  }
  .bottom {
    display: flex;
    flex-flow: row;
  }
  .inner-contents {
    width: 50%;
  }
  .first {
    background-image: url('https://imgur.com/tOMRVDi.jpg');
    padding-bottom: 50%;
    margin-right: .5rem;
  }
  .second {
    background-image: url('https://imgur.com/4oewNdx.jpg');
    padding-bottom: 50%;
    margin-left: .5rem;
  }
  .right {
    width: 40%;
    background-image: url('https://imgur.com/7gB1jHR.jpg');
    padding-bottom: 60%;
    align-content: stretch;
    margin-left: 1rem;
    flex-shrink: 0;
  }
  .img {
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
    <div class="gallery">
      <div class="article">
        <div class="grid left">
          <a class="inset-contents top img"></a>
          <div class="inset-contents bottom">
            <a class="inner-contents first img"></a>
            <a class="inner-contents second img"></a>
          </div>
        </div>
        <a class="grid right img"></a>
      </div>
    </div>

答案 2 :(得分：0)

你好，如果我是对的，你只是想摆脱差距，并想扩大图像。 您可以检查一下。

          * {
            margin: 0 auto;
            padding: 0 auto;
          }
          div, section {
            position: relative;
          }
          .gallery {
            width: 1200px;
            height: 100%;
            border: 1px solid black;
            box-sizing: border-box;
          }
          .article {
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: row;
            align-items: center;
          }
          .grid {
            height: 100%;
          }
          .left {
            width: 60%;
          }
          .inset-contents {
            width: 100%;
            height: 50%;
          }
          .top {
        
            background-image: url('https://imgur.com/3ozQvk9.jpg');
            padding-bottom: 50%;
          }
          .bottom {
            display: flex;
            flex-flow: row;
          }
          .inner-contents {
            width: 50%;
          }
          .first {
            background-image: url('https://imgur.com/tOMRVDi.jpg');
            padding-bottom: 50%;
          
          }
          .second {
            background-image: url('https://imgur.com/4oewNdx.jpg');
            padding-bottom: 50%;
      
          }
          .right {
            width: 40%;
            background-image: url('https://imgur.com/7gB1jHR.jpg');
            padding-bottom: 60%;
            align-content: stretch;

          }
          .img {
            display: block;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
          }
        <div class="gallery">
          <div class="article">
            <div class="grid left">
              <a class="inset-contents top img"></a>
              <div class="inset-contents bottom">
                <a class="inner-contents first img"></a>
                <a class="inner-contents second img"></a>
              </div>
            </div>
            <a class="grid right img"></a>
          </div>
        </div>

您只需要删除放在.gallery子级中的所有边距。

相关问题
最新问题