代码之家  ›  专栏  ›  技术社区  ›  BackSlash

CSS列:先填充行

  •  0
  • BackSlash  · 技术社区  · 6 年前

    我正在尝试用css3列进行pinterest样式的布局。

    到目前为止这是我的代码:

    .column-container {
      width: 100%;
      column-count: 4;
      column-gap: 5px;
      padding: 0;
      margin: 0;
    }
    
    .column-container > * {
      width: 100%;
      display: inline-block;
      margin: 0;
      padding: 0;
    }
    
    img {
      max-width: 100%;
    }
    <div class="column-container">
       <figure>
          <img src="https://via.placeholder.com/500x150">
       </figure>
       <figure>
          <img src="https://via.placeholder.com/500x250">
       </figure>
       <figure>
          <img src="https://via.placeholder.com/500x350">
       </figure>
       <figure>
          <img src="https://via.placeholder.com/500x450">
       </figure>
       <figure>
          <img src="https://via.placeholder.com/500x150">
       </figure>
       <figure>
          <img src="https://via.placeholder.com/500x250">
       </figure>
       <figure>
          <img src="https://via.placeholder.com/500x350">
       </figure>
       <figure>
          <img src="https://via.placeholder.com/500x450">
       </figure>
       <figure>
          <img src="https://via.placeholder.com/500x150">
       </figure>
    </div>

    到目前为止还有效,但如果没有 <figure> 元素:

    宽度:100%;
    列数:4;
    填充:0;
    边距:0;
    }
    
    .列容器>*{
    宽度:100%;
    显示:内联块;
    填充:0;
    }
    
    最大宽度:100%;
    }
    <div class="column-container">
       <figure>
          <img src="https://via.placeholder.com/500x150">
       </figure>
       <figure>
          <img src="https://via.placeholder.com/500x250">
       </figure>
    </div>

    有没有办法让他们每列调整一个?

    2 回复  |  直到 6 年前
        1
  •  1
  •   Jamie Buttons Coulter    6 年前

    你的图形显示为内联块。改为显示它们块

    .column-container > * {
      width: 100%;
      display: block;
      margin: 0;
      padding: 0;
    }
    

    .column-container {
      width: 100%;
      column-count: 4;
      column-gap: 5px;
      padding: 0;
      margin: 0;
    }
    
    .column-container > * {
      width: 100%;
      display: block;
      margin: 0;
      padding: 0;
    }
    
    img {
      max-width: 100%;
    }
    <div class="column-container">
       <figure>
          <img src="https://via.placeholder.com/500x150">
       </figure>
       <figure>
          <img src="https://via.placeholder.com/500x250">
       </figure>
    </div>
        2
  •  1
  •   Matt.S    6 年前

    必须将它们显示为块而不是内联块,才能使它们显示在彼此之上。

    .column-container > * {
       width: 100%;
       display: block;
       margin: 0;
       padding: 0;
    }
    
    推荐文章