2

画像の横に説明がある画像を含むセルの横スクロールストリップを使用する Web サイトを設計しています。

+----------------------------------+  +----------------------------------+
|+--------+   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 に答える