Question

我需要创建一个幻灯片类型的div，它包含一行中的图像而不会包裹。作为一个试验，我试图创建一个div，我可以在其中包含不包含的文本。可悲的是我无法弄清楚如何做到这一点，我对CSS不是很好......有人可以帮忙吗？

到目前为止，我已经完成了：

<style>
.filmstrip
{
    background-color:silver;
    padding:20px;
    overflow-x:scroll;  
    display: inline-block; 
}
</style>

<div class='filmstrip'>
This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test 
</div>

我想＆＃34;这是一个测试＆＃34;排成一列。（就像在SO中一样）。但是在我的页面中，它包裹着......

我现在能够在评论部分显示没有滚动的文字显示文字...我在这里添加原始问题陈述关于无包装显示图像

我在$images内有一系列图像。我想在div中单行显示这些图像。我根据这里的评论尝试了以下内容：

<style>
.filmstrip
{
    background-color:silver;
    padding:20px;
    overflow:scroll;    
    white-space: nowrap; 
}
</style>
<div class='filmstrip'>
<?php
foreach($images as $image)
{

    echo "<div><img src='".$image->thumbnail."'></div>";
}
?>
</div>

但这仍然是分开的......

Answer 1

如果您希望所有文字都在一行中，那么您必须添加的 空白：NOWRAP;

要查看单行中的所有文字，您必须添加 溢出：滚动

根据我的知识，fiddle会帮助你。

<强>代码

.filmstrip { background-color:silver; padding:20px; overflow-x:scroll; display: inline-block; width: 600px; overflow: scroll; white-space:nowrap; }

<div class='filmstrip'> This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test </div>

如果你想让图像出现在一行中，只需要在div中添加所有img标签。

默认情况下是内联元素，因此它将在同一行中对齐，添加 white-space：no-wrap ，您将获得所有图像没有休息的行。

Fiddle用于单行图像。

Answer 2

请尝试以下操作： Demo

.filmstrip {
    width:80%;   
    border:2px solid #000;
    overflow:auto;
    white-space:nowrap;

}
.filmstrip img {
    margin:20px 10px 0 10px;
    width:140px;
    height:140px;
}

更新 demo ，无保证金：

.filmstrip {
    width:80%;   
     background-color:silver;
    overflow:auto;
    white-space:nowrap;
    padding:20px;

}
.filmstrip img {    
    width:140px;
    height:140px;
    border:1px solid #000;
}

Answer 3

检查出来：

https://jsfiddle.net/0cddc72t/5/

<强> CSS

.filmstrip
{
    background-color:silver;
    padding:20px;
    overflow-x:scroll;  
    display: inline-block; 
    width: 600px;
    overflow: scroll;
    white-space:nowrap;
}

.filmstrip > div {
    display: inline-block;
    background-color: #333;
}

这是你想要的吗？

在div中显示内容而不包装

3 个答案: