1

比較的固定された div 内で CSS 列を使用して、列のような方法で画像を配置しようとしています。divを垂直にスクロールしたいのですが、利用可能な最大垂直スペースに達すると、右側に新しい列が作成され、意図した3つの列を維持して垂直にオーバーフローするのではなく、divが水平にスクロールされます。それを修正する方法について何か考えはありますか？

    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

1列カウントで試してみると、テキストが利用可能な高さよりも大きくなると、2番目の列に自動的に分割されます-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

私はこの正確な問題を抱えていました.2つは互換性がないように見えるため、列数を持つ要素ではなく、親要素でoverflow-y:scroll（またはauto）を使用することで解決します。

于 2020-06-23T19:25:47.463 に答える
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 に答える