1

我正在尝试使用相对固定的 div 中的 CSS 列以类似列的方式排列图像。我希望 div 垂直滚动，但是当它达到可用的最大垂直空间时，它会在右侧创建新列，迫使 div 水平滚动，而不是保持 3 个预期的列并垂直溢出。关于如何解决它的任何想法？

    body {
      background-color: white;
      width:100%;
      height:100%;
      position:absolute;
      font-family: "ff-tisa-web-pro",serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.45;
      color: #333;
      background: rgba(200,125,06,0.5)
    }

    .grid {
      position:relative;
      height:80%;
      -webkit-columns: 150px;
      -moz-columns: 3 150px;
      columns: 3 150px;
      width:40%;
      margin:auto;
      overflow: auto;
      background: rgba(200,125,06,0.5);
      break-inside: avoid;
    }
  .grid img{
    width:100%;
  }
    <div class="grid">
      <img src="http://i.telegraph.co.uk/multimedia/archive/03434/guinness-eyeballs_3434500k.jpg"/>
      <img src="https://www.allindiaroundup.com/wp-content/uploads/2015/01/mr-bean-pics-as-a-baby-whatsapp-dp-1024x768.jpg"/>
      <img src="http://www.likecool.com/Gear/Pic/10%20Vintage%20Pics%20Of%20Carrie%20Fisher%20Promoting%20%20Return%20Of%20The%20Jedi%20%20In/10-Vintage-Pics-Of-Carrie-Fisher-Promoting--Return-Of-The-Jedi--In-2.jpg"/>
      <img src="http://8.mshcdn.com/wp-content/uploads/2012/10/steve-jobs-finger.jpg"/>
      <img src="https://www.funnypica.com/wp-content/uploads/2012/05/funny-picture-of-ugly-indian.jpg"/>
      <img src="http://i.telegraph.co.uk/multimedia/archive/03434/guinness-eyeballs_3434500k.jpg"/>
      <img src="https://www.allindiaroundup.com/wp-content/uploads/2015/01/mr-bean-pics-as-a-baby-whatsapp-dp-1024x768.jpg"/>
      <img src="http://www.likecool.com/Gear/Pic/10%20Vintage%20Pics%20Of%20Carrie%20Fisher%20Promoting%20%20Return%20Of%20The%20Jedi%20%20In/10-Vintage-Pics-Of-Carrie-Fisher-Promoting--Return-Of-The-Jedi--In-2.jpg"/>
      <img src="http://8.mshcdn.com/wp-content/uploads/2012/10/steve-jobs-finger.jpg"/>
      <img src="https://www.funnypica.com/wp-content/uploads/2012/05/funny-picture-of-ugly-indian.jpg"/>
    </div>

4

3 回答 3

1

Try with 1 column-count and as text get bigger than available height it will auto split in to second column - columns: 1 150px;

body {
    background-color: white;
    width:100%;
    height:100%;
    position:absolute;
    font-family: "ff-tisa-web-pro",serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
    color: #333;
    padding: 1em;
    overflow: hidden;
    background: rgba(200,125,06,0.5)
  }

  article {
    position:relative;
    height:70%;
    -webkit-columns: 150px;
    -moz-columns: 1 150px;
    columns: 1 150px;
    padding:1em;
    width:40%;
    margin:auto;
    overflow: scroll;
    background: rgba(200,125,06,0.5)
  }
<article>
    At noon they sat down by the roadside, near a little brook, and Dorothy opened her basket and got out some bread.  She offered a piece to the Scarecrow, but he refused.
    I am never hungry,&rdquo; he said, &ldquo;and it is a lucky thing I am not, for my mouth is only painted, and if I should cut a hole in it so I could eat, the straw I am stuffed with would come out, and that would spoil the shape of my head.&rdquo;
  Dorothy saw at once that this was true, so she only nodded and went on eating her bread.
  &ldquo;Tell me something about yourself and the country you came from,&rdquo; said the Scarecrow, when she had finished her dinner.  So she told him all about Kansas, and how gray everything was there, and how the cyclone had carried her to this queer Land of Oz.
   &ldquo;Tell me something about yourself and the country you came from,&rdquo; said the Scarecrow, when she had finished her dinner.  So she told him all about Kansas, and how gray everything was there, and how the cyclone had carried her to this queer Land of Oz.
   &ldquo;Tell me something about yourself and the country you came from,&rdquo; said the Scarecrow, when she had finished her dinner.  So she told him all about Kansas, and how gray everything was there, and how the cyclone had carried her to this queer Land of Oz.
    &ldquo;Tell me something about yourself and the country you came from,&rdquo; said the Scarecrow, when she had finished her dinner.  So she told him all about Kansas, and how gray everything was there, and how the cyclone had carried her to this queer Land of Oz.
   &ldquo;Tell me something about yourself and the country you came from,&rdquo; said the Scarecrow, when she had finished her dinner.  So she told him all about Kansas, and how gray everything was there, and how the cyclone had carried her to this queer Land of Oz.
   &ldquo;Tell me something about yourself and the country you came from,&rdquo; said the Scarecrow, when she had finished her dinner.  So she told him all about Kansas, and how gray everything was there, and how the cyclone had carried her to this queer Land of Oz.
  </article>

于 2016-06-05T04:59:18.963 回答
1

让我们看看这是否对您有帮助。

body {
      background-color: white;      
      height:100%;
      position:absolute;
      font-family: "ff-tisa-web-pro",serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.45;
      color: #333;
      background: rgba(200,125,06,0.5)
    }

    .grid {
      position:relative;     
      -webkit-columns:3 150px;
      -moz-columns: 3 150px;
      columns: 3 150px;      
      margin:auto;
      overflow: auto;
      background: rgba(200,125,06,0.5);
      break-inside: avoid;
    }
  .grid img{
    width:100%;
  }
<div class="grid">
      <img src="http://i.telegraph.co.uk/multimedia/archive/03434/guinness-eyeballs_3434500k.jpg"/>
      <img src="https://www.allindiaroundup.com/wp-content/uploads/2015/01/mr-bean-pics-as-a-baby-whatsapp-dp-1024x768.jpg"/>
      <img src="http://www.likecool.com/Gear/Pic/10%20Vintage%20Pics%20Of%20Carrie%20Fisher%20Promoting%20%20Return%20Of%20The%20Jedi%20%20In/10-Vintage-Pics-Of-Carrie-Fisher-Promoting--Return-Of-The-Jedi--In-2.jpg"/>
      <img src="http://8.mshcdn.com/wp-content/uploads/2012/10/steve-jobs-finger.jpg"/>
      <img src="https://www.funnypica.com/wp-content/uploads/2012/05/funny-picture-of-ugly-indian.jpg"/>
      <img src="http://i.telegraph.co.uk/multimedia/archive/03434/guinness-eyeballs_3434500k.jpg"/>
      <img src="https://www.allindiaroundup.com/wp-content/uploads/2015/01/mr-bean-pics-as-a-baby-whatsapp-dp-1024x768.jpg"/>
      <img src="http://www.likecool.com/Gear/Pic/10%20Vintage%20Pics%20Of%20Carrie%20Fisher%20Promoting%20%20Return%20Of%20The%20Jedi%20%20In/10-Vintage-Pics-Of-Carrie-Fisher-Promoting--Return-Of-The-Jedi--In-2.jpg"/>
      <img src="http://8.mshcdn.com/wp-content/uploads/2012/10/steve-jobs-finger.jpg"/>
      <img src="https://www.funnypica.com/wp-content/uploads/2012/05/funny-picture-of-ugly-indian.jpg"/>
    </div>

于 2016-06-05T05:41:07.943 回答
1

我遇到了这个确切的问题，解决方案是在父元素上使用overflow-y:scroll（或auto），而不是在具有列数的元素上使用，因为两者似乎不兼容。

于 2020-06-23T19:25:47.463 回答