1

コンテナー div に動的に読み込まれるコンテンツを使用して横スクロール レイアウトを作成しようとしています。body div の子 div は左にフロートされ、任意の幅にすることができます。

<div id="container" style="overflow-y:hidden, overflow-x:scroll">
    <div style="float: left">Lots of images and text</div>
    <div style="float: left">More images and text</div>
    <div style="float: left">Even more</div>
</div>

基本的に、このフィドルを機能させる必要があるため、内側の div は左右に並べてスクロールし、いくつでも配置できます。コンテナ div もサイズ変更可能です;]

cssのみでこれを行うことは可能ですか？JavaScript を使用する必要がありますか?

4

2 に答える 2

2

http://jsfiddle.net/zepva/1/

#simulating_body {
    width: 98%;
    border: 3px solid #222;
}

#middle {
    overflow: auto;
    white-space: nowrap;
}

.inner{
    display: inline-block;

}

いくつかのヒント: ID を複数回使用することはできないため#inner、2 つの内部 div を使用していた場合は機能しません。

inline-block を使用した正しいアイデアがありましたが、間違った要素を使用していました。

inline-block横に並べたい要素で使用しwhite-space: nowrap;てから、それらの親要素で使用して、それらが同じ行にあることを確認します。

于 2013-06-26T02:33:50.507 に答える
0

フロートでできるとは思えませんが、うまくいくdisplay: inline-blockはずです：

HTML

<div id="container">
    <div>Lots of images and text</div>
    <div>More images and text</div>
    <div>Even more</div>
</div>

CSS

#container {
    white-space: nowrap;
    max-width: 100px;
    overflow-x: auto;
}
div {
    white-space: nowrap;
    display: inline-block;
}

ここに jsbin があります: http://jsbin.com/uguhiz/1/edit

于 2013-06-26T02:35:37.767 に答える