如果一行已满，如何避免 div 执行新行？

Question

如果一行已满，如何避免 <div> 标签执行新行。让我们假设这个 div 有一组图像。

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

<div>中的图像在php循环中执行新行并出现滚动条，因为CSS中的overflow: scroll;代码。我的期望输出是：

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

注意：图像 3 和 4，如果您将 div 滚动到一侧，则会打印出来。

这是我想要的输出，其中将有一个水平滚动条，并且滚动视图是水平的。知道如何做到这一点吗？

Answer 1

将white-space: nowrap;应用到您的div。

div{
  white-space: nowrap;
}

Answer 2

已将 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>

Note: If you want only horizontal scroll, you must specify overflow-y:hidden; & overflow-x:auto; so it would hide vertical scroll-bar and will give horizontal scroll-bar only if required.

希望这对您有所帮助。

如果一行已满，如何避免 div 执行新行？

How can I avoid div from executing new line if one line is already full?

html

css

divider