Question

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

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

<div>中的图像在php循环期间执行新行，并且由于CSS中的overflow: scroll;代码而显示滚动条。我的期望输出是：

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

注意：如果将div向侧面滚动，则会打印图像3和4。

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

Answer 1

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

div{
  white-space: nowrap;
}

Answer 2

在您的div中添加了white-space: nowrap; display:inline-block;

Answer 3

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

注意：如果您只想横向滚动，则必须指定overflow-y:hidden;＆amp; overflow-x:auto;所以它会隐藏垂直滚动条，并且只在需要时才会提供水平滚动条。

希望这对你有所帮助。

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

3 个答案: