無制限の水平divスクロール - React/CSS

Question

私は実際にはCSSの経験が少ないので、私はこのパスで新しい初心者ですし、私はそれに行divといくつかのカードがあります。しかし、カードが追加されたときにその行が水平にスクロールできるようにしたい。ここにその様子があります。

カードを追加すると、それらは自動的にお互いの下に置くが、私は彼らが並んでする必要があります。コードスニペットは次のとおりです。

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="box box-transparent"> 
      <div class="box-body"> 
       <h5 class="text-primary">IF: Add one or more conditions.</h5><br> 
       <div> 
        <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;"> 
         <div class="card-content" style="color: black;"><span class="card-title">property</span> 
          <p>&gt; 21</p> 
         </div> 
         <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div> 
        </div> 
        <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;"> 
         <div class="card-content" style="color: black;"><span class="card-title">property</span> 
          <p>&lt;= 45</p> 
         </div> 
         <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div> 
        </div> 
       </div> 
       <div> 
        <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;"> 
         <div class="card-content" style="color: black;"><span class="card-title">property4</span> 
          <p>== 45</p> 
         </div> 
         <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div> 
        </div> 
       </div> 
       <div> 
        <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;"> 
         <div class="card-content" style="color: black;"><span class="card-title">property4</span> 
          <p>== 38</p> 
         </div> 
         <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div> 
        </div> 
        <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;"> 
         <div class="card-content" style="color: black;"><span class="card-title">property</span> 
          <p>&gt; 89</p> 
         </div> 
         <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div> 
        </div> 
        <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;"> 
         <div class="card-content" style="color: black;"><span class="card-title">property</span> 
          <p>&lt; 56</p> 
         </div> 
         <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- react-empty: 150 --> 
    <div class="col-sm-1" style="border-width: 3px; border-left-style: solid; border-left-color: rgb(51, 51, 51); margin-bottom: -57px; margin-top: -14px;"></div> 
    <div class="col-sm-5"> 
     <div class="box box-transparent"> 
      <div class="box-body"> 
       <h5 class="text-primary">THEN: Add or select one or more actions.</h5><br> 
       <div class="card bg-color-success" style="height: 170px; width: 300px; border-color: green; background-color: white; border-width: 4px;"> 
        <div class="card-content" style="color: black;"><span class="card-title">New Action</span> 
         <p>Click to edit</p> 
        </div> 
        <div class="card-action"><a href="javascript:;" style="color: black;">AND</a><a style="color: gray;">EDIT</a></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

原因はCSSのプロパティがないため、私は問題が正確に何かを知ることができません。しかし、多分CSSのプロパティの下であなたを助けるでしょう。

.card-container{ 
 
    white-space: nowrap; 
 
    overflow-y: auto; 
 
} 
 
.card-container .card{ 
 
    display: inline-block; 
 
    border: 1px solid #aaa; 
 
    padding: 15px; 
 
}

<div class="row"> 
 
    <div class="col-sm-6"> 
 
     <div class="box box-transparent"> 
 
      <div class="box-body"> 
 
       <h5 class="text-primary">IF: Add one or more conditions.</h5><br> 
 
       <div class="card-container"> 
 
        <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;"> 
 
         <div class="card-content" style="color: black;"><span class="card-title">property</span> 
 
          <p>&gt; 21</p> 
 
         </div> 
 
         <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div> 
 
        </div> 
 
        <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;"> 
 
         <div class="card-content" style="color: black;"><span class="card-title">property</span> 
 
          <p>&gt; 21</p> 
 
         </div> 
 
         <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div> 
 
        </div> 
 
        <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;"> 
 
         <div class="card-content" style="color: black;"><span class="card-title">property</span> 
 
          <p>&gt; 21</p> 
 
         </div> 
 
         <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div> 
 
        </div> 
 
        <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;"> 
 
         <div class="card-content" style="color: black;"><span class="card-title">property</span> 
 
          <p>&lt;= 45</p> 
 
         </div> 
 
         <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

まず、あなたが1 <div></div>を使用して、すべてのカードをラップする必要があります（実際には、タグ名は重要ではありません。）。つまり、各カードには同じ親があります。

第2の各カードを水平に置くには、カードの表示スタイルをblockからinline-blockに変更します。第三に

は、改行を防ぐだけでなく親white-space: nowrapにCSSプロパティを追加最後にhere

を説明し、それはスクロール可能になり、親にoverflow-x: autoを追加します。

私はそれが役に立ちそうです。 :)