web-dev-qa-db-ja.com

CSSの水平スクロール

水平スクロールのみ可能な一連の写真で<div>を作成しようとしています。

次のようになります LINK ;

ただし、写真を含む<div>の幅を指定することによってのみ上記を実現します（したがって、「ワードラップ」しません）。幅を入れないと-このようになります; LINK

画像が異なる可能性があるため、CSSを使用して固定幅を入れないようにするにはどうすればよいですか。

ありがとう

htmlcsshorizontal-scrolling
40
Simon R

display:inline-blockをwhite-space:nowrapとともに使用できます。このように書く：

.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap
}
.imageDiv img {
    box-shadow: 1px 1px 10px #999;
    margin: 2px;
    max-height: 50px;
    cursor: pointer;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
 }

これを確認してください http://jsfiddle.net/YbrX3/

95
sandeep

ここでこのリンクをチェックして、ディスプレイを変更します：インラインブロック http://cssdesk.com/gUGBH

3
vicky

テーブル構造を使用してみてください。より互換性があります。これを確認してください テーブルを使用した水平スクロール

0
Subroto

このコードを使用して、水平スクロールブロックのコンテンツを生成します。ここから入手しました http://www.htmlexplorer.com/2014/02/horizo​​ntal-scrolling-webpage-content.html

<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {  
    overflow: scroll;  
    width:100%;
}
#outer_wrapper #inner_wrapper {
    width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
    width: 250px;
    height:300px;
    float: left;
    margin: 0 4px 0 0;
    border:1px grey solid;
}
</style>
</head>
<body>

<div id="outer_wrapper">
    <div id="inner_wrapper">
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
             <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
             <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <!-- more boxes here -->
    </div>
</div>
</body>
</html>
0
FrameWorker