1

私は現在、常にテーブルを使用する代わりに、DIVでいくつかのことをテストしています。

そこで、次のような小さなデザインを作成しました。

<div id="container">
    <div id="header"><h1>Header of the page</h1></div>
    <div style="width: 27px; float: left;"><img src="style/images/top_left_corner.jpg" alt="" /></div>
    <div style="width: 859px; float: left;"><img src="style/images/top_bar.jpg" alt="" /></div>
    <div style="width: 28px; float: left;"><img src="style/images/top_right_corner.jpg" alt="" /></div>
    <div style="width: 27px; float: left;"><img src="style/images/left_vert_bar1.jpg" alt="" /></div>
    <div style="width: 859px; float: left;">
        <div id="top_content">
            <div id="explanation">
                <span>Some text comes here</span>
            </div>

            <div id="form">
                <form method="post" action="index.php" enctype="multipart/form-data">
                    <label for="file">File:</label>
                    <input type="file" name="datei" size="40" maxlength="100000" />&nbsp;<input type="submit" name="sub" value="Submit" />
                </form>
            </div>
        </div>
    </div>
    <div style="width: 28px; float: left;"><img src="style/images/right_vert_bar1.jpg" alt="" /></div>
    <div class="left_dyn">&nbsp;</div>
        <div id="middle_content">
            <div id="form_output">Here is the outcome of the Form</div>
        </div>
    <div class="right_dyn">&nbsp;</div>
    <div style="width: 27px; float: left; clear: left;"><img src="style/images/left_vert_bar2.jpg" alt="" /></div>
    <div id="placeholder">&nbsp;</div>
    <div style="width: 28px; float: left;"><img src="style/images/right_vert_bar2.jpg" alt="" /></div>
    <div style="width: 27px; float: left;"><img src="style/images/bottom_left_corner.jpg" alt="" /></div>
    <div style="width: 859px; float: left;"><img src="style/images/bottom_bar.jpg" alt="" /></div>
    <div style="width: 28px; float: left;"><img src="style/images/bottom_right_corner.jpg" alt="" /></div>
    <div id="footer"><span>Some Footer Text</span></div>
</div>

これで、DIVは、CSSファイルで設定された背景画像class="left_dyn"をclass="right_dyn"表示し、DIVにコンテンツがある場合は、垂直方向に繰り返す必要があります。id="form_output"

これは、CSSファイルでの方法class="left_dyn"とclass="right_dyn"外観です。

/* Dyn Design */
.left_dyn {
         background: url('../images/left_dyn_bar.jpg') repeat-y scroll;
         width: 27px;
         float: left;
}

.right_dyn {
         background: url('../images/right_dyn_bar.jpg') repeat-y scroll; 
         width: 28px;
         float: left;
}

ただし、DIVにコンテンツを入力するとid="form_output"、DIVclass="left_dyn"とclass="right_dyn"高さが増しますが、bakcground画像が垂直方向に繰り返されません:(

木々が全部そろっている木が見えない印象があります。

4

2 に答える 2

1

さて、私は解決策を見つけました：

上で述べたように、問題は、left_dyn列とright_dyn列がform_outputdivで展開されないことです。この問題の1つの解決策は、これら2つのdivに次のcssルールを設定することです。

padding-bottom: 32000px; /* Arbitrary number big enough to cover expanding content */
margin-bottom: -32000px;

これにより、基本的にleft_dyn / right_dyn divが展開され、form_outputdivの高さに一致します。

次に、オーバーフローを非表示にするため、親コンテナを設定する必要があります。

overflow: hidden;

このインラインをページで編集してみたところ、フッターの問題を除いて機能することがわかりました。これは、フッターを親ラッパーの外に出すことで簡単に解決できます。

ここで効果を説明する簡単なデモをノックアップしました：http：//jsfiddle.net/mWLL9/

于 2012-11-01T13:34:15.170 に答える
0

@ C.Felix今日では誰tableもウェブサイトを作成するために使用していないので、それは非常に良い考えです。検索エンジンがテーブル化されたWebサイトをクロールしたり、クロールが遅くなったりしないためです。したがって、常にテーブルレスデザインを作成するようにしてください。これはSEOの目的に適しています。

あなたはこのウェブサイトからオンラインで学ぶことができます：w3schools.com

于 2012-11-01T16:45:38.840 に答える