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

【问题标题】：How can I avoid div from executing new line if one line is already full?如果一行已满，如何避免 div 执行新行？
【发布时间】：2015-09-08 05:26:22
【问题描述】：

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

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

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

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

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

这是我想要的输出，其中会有一个水平滚动条，并且滚动视图是水平的。关于如何做到这一点的任何想法？

【问题讨论】：

你能分享一下完整和相关代码，HTML和CSS

标签： html css divider

【解决方案1】：

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

div{
  white-space: nowrap;
}

【讨论】：

试试你自己，你可能知道。这是将图像包装成一行的方式。

【解决方案2】：

将white-space: nowrap; display:inline-block; 添加到您的 div 中

【讨论】：

元素永远不会换行

【解决方案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;，这样它就会隐藏垂直滚动条，并且只有在需要时才会提供水平滚动条。

希望这对你有帮助。

【讨论】：