0

垂直スクロールのないページがありますが、すべてが水平に表示されます。

私のページの最後まで（右端まで）スクロールすると、私の連絡先情報が表示されます。例えば：

<div1></div1>
<div2></div2>
<div3></div3>
<divN></divN>

この場合、div1が一番左の項目で、中央にdiv2があり、その右側にdiv3があります...最後にdivNが表示されます。すべてのdivの幅は500ピクセルです。ページ幅を20000px（4 divの場合）に設定できます。これはうまく機能します。ただし、ページを動的にし、divN以外の各divがデータ​​ベースからロードされるようにします。つまり、コンテンツを追加するたびに、ページ幅を手動で増やす必要があります。

このプロセスを自動化する方法はありますか？

4

5 に答える 5

3

私が理解しているように、あなたはこれを望んでいるかもしれません：

.parent{
    overflow:hidden;
    white-space:nowrap;
}

.parent > div{
    width:500px;
    height:300px;
    border:1px solid red;
    display:inline-block;
    *display:inline;/*For IE7*/
    *zoom:1;
    white-space:normal;
}

これをチェックしてくださいhttp://jsfiddle.net/HJsrJ/

于 2012-06-22T07:18:34.877 に答える
1

width:100%外部 div に使用し、width:33%すべてのコンテンツを正しい方法でフローティングさせて他の div を作成してみませんか?

例を見る

于 2012-06-22T07:19:51.393 に答える
0

別のオプションは、これらの各divにクラスを指定し、javasriptを使用して存在するクラスの数をカウントし、これに各divの必要な幅を掛けてから、javascriptを使用してondocumentreadyイベントでページ幅を設定することです。

于 2012-06-22T07:22:52.937 に答える
0

値を動的に変更したい場所にプレースホルダーを挿入して、CSS をテーブルに保存できます。ひょっとして、これはどこかのテンプレート ファイルかもしれません。次に、新しいセクションをベースに公開するたびに、テンプレートをプルし、プレースホルダーを文字列で置き換えてから、新しい CSS をファイルに書き出します。

わかる？

于 2012-06-22T07:16:28.510 に答える
0

OPがここで何を望んでいるかは100％わかりませんが、「解決策」は次のとおりです。

HTML:

<div class="parent">
    <div id="div1">1 has content</div>
    <div id="div2" class="nocontent"><!-- no content --></div>
    <div id="div3">3 has content</div>
    <div id="div4">4 has content</div>
    <div id="div5" class="nocontent"><!-- no content --></div>
    <div id="div6" class="nocontent"><!-- no content --></div>
</div>​

CSS:

.parent {
    white-space: nowrap;
}

.parent > div {
    display: inline-block;
    width: 200px;
    margin-left: 1px;
    background: #eee;
}

.parent > .nocontent {
    display: none;            
}
​

JavaScript (jQuery):

$(function() {
   // Simulate loading content
    setTimeout(function() {
        $('#div2').text('2 has content now').removeClass('nocontent');
    }, 3000);
});​

デモ：

http://jsfiddle.net/foxbunny/EY9sc/

于 2012-06-22T08:39:58.233 に答える