無限的水平div滾動 - 反應/ 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>

首先，你應該使用包裝所有卡之一<div></div>（事實上，標籤名稱並不重要）。換句話說，每張卡都有相同的父母。

秒，爲了能夠把每張卡水平放置，將卡的顯示樣式block更改爲inline-block。

三，爲了防止斷線，CSS屬性添加到父white-space: nowrap，這是很好的解釋here

最後，加overflow-x: auto母公司，它使滾動。

我希望它有幫助。 :)