Question

我正在设计一个网站，该网站使用横向滚动的单元格条，其中包含图像旁边的图像。

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

我试图在css中使用float但是使用它会导致.scrolling div中不希望的.cell div包装。什么是创造这种效果的最佳方法？

Answer 1

尝试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;
}

带字幕的侧滚图像

1 个答案: