如果一行已滿，如何避免div執行新行？

Question

如果一行已滿，如何避免<div>標記執行新行。 假設該div有一組圖像。

------------------------------------
|                                  |
|     Image 1           Image 2    |
|                                  |
|                                  |
|     Image 3           Image 4    |
|                                  |
------------------------------------

<div>的圖像在php循環期間執行新行，並由於overflow: scroll;而出現滾動條overflow: scroll; CSS中的代碼。 我想要的輸出是：

|----------------------------------|
|                                  |
|     Image 1      Image 2     Imag|
|                                  |
|                                  |
|----------------------------------|

注意：如果將div滾動到側面，則會打印圖像3和4。

這是我想要的輸出，其中將有一個水平滾動條，並且滾動視圖將是水平的。 關於如何執行此操作的任何想法？

Answer 1

應用white-space: nowrap; 給你的div

div{
  white-space: nowrap;
}

Answer 2

添加white-space: nowrap; display:inline-block; white-space: nowrap; display:inline-block; 給你的div

Answer 3

嘗試一下：

 .imgbox { height:300px; width:100%; overflow-y:hidden; overflow-x:auto; border:1px solid red; white-space: nowrap; } img { height:300px; } 

 <div class="imgbox"> <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="image1" /> <img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="image1" /> <img src="https://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" alt="image1" /> <img src="http://2.bp.blogspot.com/-CMIQjovvgcQ/VOy4zOpkW3I/AAAAAAAAAH4/8cE_5moqRFQ/s1600/happy%2Bholi%2Bphotos.jpg" alt="image1" /> </div> 

注意：如果只想水平滾動，則必須指定overflow-y:hidden; ＆ overflow-x:auto; 因此它將隱藏垂直滾動條，並且僅在需要時才提供水平滾動條。

希望這對您有幫助。