キャプション付きのサイドスクロール画像

画像の横に画像が入った横スクロールのセルを使用するウェブサイトをデザインしています。キャプション付きのサイドスクロール画像

+----------------------------------+ +----------------------------------+ 
|+--------+ 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の望ましくないラッピングの原因となります。この効果を生み出す最良の方法は？インラインblock`代わりに `ディスプレイの：

出典

2012-04-12 richard

負の文字間隔と単語間隔を設定することを忘れないでくださいしてみてくださいinline' ？ – fcalderan

偉大な、そのトリックをした！あなたは答えを書きたいですか？ – richard

は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-12 08:48:18 fcalderan

キャプション付きのサイドスクロール画像

答えて

関連する問題