Css 带有标题的侧面滚动图像_Css_Html_Overflow

Css 带有标题的侧面滚动图像

css html

Css 带有标题的侧面滚动图像,css,html,overflow,Css,Html,Overflow,我正在设计一个网站，使用侧边滚动的单元格条，其中包含图像，图像旁边有描述 +----------------------------------+ +----------------------------------+ |+--------+ Title | |+--------+ Title | || Image | Description... | || Image | Description

我正在设计一个网站，使用侧边滚动的单元格条，其中包含图像，图像旁边有描述

+----------------------------------+  +----------------------------------+
|+--------+   Title                |  |+--------+   Title                |
|| Image  |   Description...       |  || Image  |   Description...       |
||        |                        |  ||        |                        |
|+--------+                        |  |+--------+                        |
+----------------------------------+  +----------------------------------+

我所有的尝试都是为了将标题和描述分开而产生任何必要的换行符，结果是垂直滚动而不是侧滚动。以下是我的一些代码：

<style type="text/css">
    .container {
        width: 1000px;
        height: 250px;
        overflow: hidden;
    }
    .scrolling {
        white-space: nowrap;
    }
    .cell {
        display: inline;
        height: 250px;
        width: 500px;
    }
</style>
<html>
    <body>
        <!-- The following approach sort of works but is all in a line -->
        <div class="container">
            <div class="scrolling">
                <div class="cell">
                    <img src="/static/pic1.jpg" height="200" />
                    title1 description1
                </div>
                <div class="cell">
                    <img src="/static/pic2.jpg" height="200" />
                    title2 description2
                </div>
                <!-- etcetera -->
            </div>
        </div>
    <body/>
</html>


.集装箱{
宽度：1000px；
高度：250px；
溢出：隐藏；
}
.滚动{
空白：nowrap；
}
.细胞{
显示：内联；
高度：250px；
宽度：500px；
}
标题1说明1
标题2说明2

我尝试在css中使用float，但任何使用它都会导致.scrolling div中的.cell div被不希望的包装。创建此效果的最佳方法是什么？

尝试

display:inline block

而不是

display:inline

记住还要设置负数字母间距和单词间距

.scrolling {
    white-space: nowrap;
    word-spacing: -3px;
    letter-spacing: -3px;
}
.cell {
    display: inline-block;
    word-spacing: normal;
    letter-spacing: normal;
    white-space : normal;

    height: 250px;
    width: 500px;
}

您是否也尝试了

display:inline block

而不是

display:inline

？太好了，成功了！你想写一个答案吗？