2

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

+----------------------------------+  +----------------------------------+
|+--------+   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 出现不希望的包装。创造这种效果的最佳方法是什么？

4

1 回答 1

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;
}
于 2012-04-12T08:48:18.823 回答