2

2 つのDIV要素があるとします。外側のコンテナー DIV とコンテナー内の内側 DIV です。内側の DIV を外側の DIV よりもはるかに大きくしたいのですが、外側の DIV にはoverflow:hiddenプロパティがあるため、内側の DIV のほとんどは表示されません。

目的は、外側の DIV 内で内側の DIV を移動できるスクロールまたはスワイプ機能を実装することです。

基本的な実装は次のようになります。

<!DOCTYPE html>
<html>

<head>
<style>

.container {
    width: 500px;
    height: 40px;
    border: 1px solid #a8a8a8;
    padding: 5px;
    overflow: hidden;
}

.inner-content {
    white-space: no-wrap;
    position: relative; 
    display: inline-block;
}

.inner-element {
    display: inline-block;
}

</style>

</head>

<body>
<div class = "container">
    <div class = "inner-content">
        <div class = "inner-element">Lots of content goes here</div>
        <div class = "inner-element">Lots of content goes here</div>
        <div class = "inner-element">Lots of content goes here</div>
        <div class = "inner-element">Lots of content goes here</div>
        <div class = "inner-element">Lots of content goes here</div>
        <div class = "inner-element">Lots of content goes here</div>
    </div>
</div>

</body>

</html>

問題は、ユーザーが左または右にスクロールできるように、内側の DIV 内のすべての要素を同じ水平線上に並べて表示することです。

display: inline-blockしたがって、これは、すべての要素 (または)を使用するだけで実現できますfloat。問題が内部要素の折り返しを防ぐためであることを除いて、 に非常に大きな幅を指定する必要があります.inner-content。(たとえば、width:10000pxまたは何かを指定すると、内部要素はもちろんラップされません。)しかし、問題は、ユーザーが内部 DIV を右に際限なくスクロールできることです。

では、内側の DIV 内のすべての (部分的に隠されている) 要素が同じ水平線上に残るように (幅を明示的に指定せずに) 配置するにはどうすればよいでしょうか?

4

1 に答える 1

1

あなたはサンプルコードに本当に近かったです! 内部要素を に設定しinline-blockて指定nowrapすることで、各要素がコンテナー内でラップされないようにします。ただし、要素のチェーンが各内部要素の最後で折り返されないようにする必要もあります。したがって、コンテナに追加nowrapするだけで、すべてのアイテムが同じ行に表示されます。

http://jsfiddle.net/ere4x/

于 2013-06-01T15:24:27.083 に答える