如何使一个div的孩子适合在一个较小的宽度的父div div

Question

我有一个div作为包含动态创建的孩子div的父div，但我的问题是我想孩子div是内联的，所以用户可以滚动水平，以查看更多的孩子div滚动，但我是垂直滚动而不是水平，我尝试设置溢出-y隐藏但仍然不是内联一次的子div。

<div id="frnd_r_s_c"> 
    <?php 
     $sqlfrnds = $db_connect->prepare("select * from users where id!=?"); 
     $sqlfrnds->bind_param('s',$row["id"]); 
     $sqlfrnds->execute(); 
     $result = $sqlfrnds->get_result(); 

     while($rows = $result->fetch_assoc()){ 

    ?> 
    <div class="suggest-frnd"> 
     <div id="s_f_exit">&nbsp;&times;</div> 
     <div class="suggest-frnd-img"> 
      <img src="<?php ?>" > 
     </div> 
     <div class="suggest-frnd-n-add"> 
      <div id="suggest-frnd-n"><?php echo $rows["u_firstname"]."&nbsp;";echo $rows["u_othernames"]; ?></div> 
     <div> 
      <form id="s_frnd_form"> 
       <input type="hidden" name="s_frnd_id" value="<?php echo $rows['id']; ?>"> 
       <input type="submit" name="add_frnd" value="ADD"> 
      </form> 
     </div> 
    </div> 
</div> 

<?php 
    } 
?> 
<div class="clear"></div> 
</div> 


/*style for parent div*/ 
#frnd_r_s_c{ 
    width:450px; 
    height:200px; 
    background:blue; 
    margin-left:20px; 
    overflow-y:hidden; 
    overflow-x:scroll; 
} 

/*floating the children div left to be able to display inline*/ 
#frnd_r_s_c >div{ 
    float:left; 
} 

这是动态创建者

<div id="frnd_r_s_c"> 
                          <div class="suggest-frnd"> 
                 <div id="s_f_exit">&nbsp;&times;</div> 
                 <div class="suggest-frnd-img"> 
                   <img src="" > 
                 </div> 
                 <div class="suggest-frnd-n-add"> 
                  <div id="suggest-frnd-n">ekene&nbsp;gabriel</div> 
                  <div><form id="s_frnd_form"> 
                   <input type="hidden" name="s_frnd_id" value="5"> 
                   <input type="submit" name="add_frnd" value="ADD"> 
                  </form></div> 
                 </div> 
                </div> 

                             <div class="suggest-frnd"> 
                 <div id="s_f_exit">&nbsp;&times;</div> 
                 <div class="suggest-frnd-img"> 
                   <img src="" > 
                 </div> 
                 <div class="suggest-frnd-n-add"> 
                  <div id="suggest-frnd-n">ebuka&nbsp;gabriel</div> 
                  <div><form id="s_frnd_form"> 
                   <input type="hidden" name="s_frnd_id" value="14"> 
                   <input type="submit" name="add_frnd" value="ADD"> 
                  </form></div> 
                 </div> 
                </div> 

                             <div class="suggest-frnd"> 
                 <div id="s_f_exit">&nbsp;&times;</div> 
                 <div class="suggest-frnd-img"> 
                   <img src="" > 
                 </div> 
                 <div class="suggest-frnd-n-add"> 
                  <div id="suggest-frnd-n">kc&nbsp;kelvin</div> 
                  <div><form id="s_frnd_form"> 
                   <input type="hidden" name="s_frnd_id" value="15"> 
                   <input type="submit" name="add_frnd" value="ADD"> 
                  </form></div> 
                 </div> 
                </div> 

                             <div class="suggest-frnd"> 
                 <div id="s_f_exit">&nbsp;&times;</div> 
                 <div class="suggest-frnd-img"> 
                   <img src="" > 
                 </div> 
                 <div class="suggest-frnd-n-add"> 
                  <div id="suggest-frnd-n">ecellent &nbsp;chimezie</div> 
                  <div><form id="s_frnd_form"> 
                   <input type="hidden" name="s_frnd_id" value="16"> 
                   <input type="submit" name="add_frnd" value="ADD"> 
                  </form></div> 
                 </div> 
                </div> 

                             <div class="suggest-frnd"> 
                 <div id="s_f_exit">&nbsp;&times;</div> 
                 <div class="suggest-frnd-img"> 
                   <img src="" > 
                 </div> 
                 <div class="suggest-frnd-n-add"> 
                  <div id="suggest-frnd-n">ecellent &nbsp;chimezie</div> 
                  <div><form id="s_frnd_form"> 
                   <input type="hidden" name="s_frnd_id" value="17"> 
                   <input type="submit" name="add_frnd" value="ADD"> 
                  </form></div> 
                 </div> 
                </div> 

                           <div class="clear"></div> 
            </div> 

Answer 1

可以在parent使用white-space:nowrap div，如果可以动态生成child元素，那么您甚至需要将它从display从块更改为内嵌块，如下所示：

white-space CSS属性确定如何处理元素内部的空白。

#box{ 
 
    width:100%; 
 
    height:250px; 
 
    background:black; 
 
    white-space:nowrap; 
 
    overflow-x:scroll; 
 
} 
 
#box > .b:first-child{ 
 
    margin-left:0; 
 
} 
 
#box > .b{ 
 
    width:500px; 
 
    height:200px; 
 
    margin-left:50px; 
 
    background:yellow; 
 
    display:inline-block; 
 
}

<div id="box"> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
</div>

Answer 2

你听说Flexbox的？我认为它可以帮助你。只需添加到样式父DIV：

display: flex; 
flex-wrap: nowrap; 

更多在这里：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我没有尝试，只是认为它可以帮助你:-)