如果一行已满，如何避免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; 因此它将隐藏垂直滚动条，并且仅在需要时才提供水平滚动条。

希望这对您有帮助。