0

私はdivを作成しようとしていますが、div内には、何かを配置できるさまざまな場所があります。例えば。

<div blah>

<table blah>
content...
</table>

<table blah>
content...
</table>

<table blah>
content....
</table>


</div>

http://i.stack.imgur.com/0iprE.jpg

私は実際にはWeb開発者ではないので、この質問は単純に見えるかもしれませんが、どんな助けでも大歓迎です。ああ、私はMacromediaDreamweaver8を使用しています。

ありがとう。

4

3 に答える 3

2

3つの異なるdivを使用してから、CSSを使用してdivを配置することをお勧めします。CSSポジショニングに関するこのw3スクールの記事をチェックしてください：http ：//www.w3schools.com/css/css_positioning.asp

于 2012-06-06T23:57:21.740 に答える
0

これはおそらくチュートリアルや「HelloWorld」の場所ではありませんが、ここから始めましょう。

http://jsfiddle.net/rBNUy/

HTML： 

<div class="main">
    <div class="sidebar"></div>
    <div class="top"></div>
    <div class="bottom"></div>
</div>​

CSS：

.main{  /* this makes the containing box 200x200  */
   width: 200px;
   height:200px;    
    background: #eee;
}
.sidebar{ /* this makes the sidebar 100x200 and makes it stick to as far left as it can */
    background:blue;
    float:left;
    height:100%;
    width: 100px;
}
.top, .bottom{ /* this makes the boxes 96x96 and makes them stick to as far left as they can , eventually till they hit the sidebar */
   width: 96px;
   height:96px;
    float:left;
    background:red;
    border:solid 2px green;
}

コメントは明らかに過度に単純化されていますが、本質的に、「フローティング」は、単語に文字を積み重ねるのとほとんど同じように、要素を互いに積み重ねます。

フロートされた要素が同じ行にスタックされるスペースを使い果たした場合、次の行にホップし、スタックするのに最も近い「壁」を見つけます。

于 2012-06-07T00:03:36.837 に答える
0

一般に、非表形式のデータにはテーブルを使用しないようにしてください。つまり、テーブルを使用してWebページを作成しないでください。ここにあなたが考えさせるかもしれない良い記事があります：http：//www.alistapart.com/articles/practicalcss/

ちなみに、多くの人がHTMLとCSSを学ぶためにw3schoolsを使おうとしています。w3schoolsは、経験豊富なプログラマーにとっては優れたリファレンスですが、初心者のプログラマーに全体像を教えることはできないと思います。あなたは実際に試行錯誤から、そして他の人の仕事（ソースコード）を見ることから多くを学びます。http://www.csszengarden.com/には、いくつかの新しいHTMLおよびCSS技術を習得するのに役立つWebページのすばらしいコレクションがあります。

テーブルを使用する場合にマークアップがどのように（恐ろしく）見える必要があるかについて、大まかな解決策を実装しました。

http://jsfiddle.net/Wexcode/vMXQe/

HTML：

<table id="container">
    <tr>
        <td id="sidebar"></td>
        <td id="main">
            <table>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
        </td>
    </tr>
</table>​

CSS：

table { background: #000; }
td { background: #fff; }

#container { 
    width: 600px;
    height: 400px;
    margin: 0 auto; }
#sidebar { width: 35%; }
#main { width: 65%; }
#main table { width: 100%; height: 100%; }
#main table tr { height: 50%; }
于 2012-06-07T00:17:37.753 に答える