1

この単純なテーブル構造をcssdivに変換するのに本当に助けが必要です。簡単なアプリケーションか何かがありますか。CSSdivが私を狂わせています。

<table width="100%" border="0">
  <tr>
<td colspan="3" id="Header"></td>
 </tr>
<tr>
<td width="20%" id="Nav2"></td>
<td width="40%" id="ContentMiddleLeft"></td>
<td width="40%" id="ContentMiddleRight"></td>
 </tr>
<tr>
<td colspan="3" id="BottomContent"></td>
</tr>
</table>
4

3 に答える 3

2

これをテストします：

編集：http：//jsfiddle.net/DCbgg/

<style type="text/css" media="screen">
    .container {
        width: 100%;
    }
    .left20 {
        width: 20%;
        float: left;
        background: red;
    }
    .left40 {
        width: 40%;
        float: left;
        background: green;
    }
    .clear {
        clear: both;
    }
</style>

<div class="container">
    <div class="left20">
        Left
    </div>
    <div class="left20">
        Left        
    </div>
    <div class="left40">
        Left
    </div>
<div class="clear"></div>
    <div class="left20">
        Left
    </div>
    <div class="left20">
        Left        
    </div>
    <div class="left40">
        Left
    </div>
</div>
<div class="clear"></div>
于 2012-07-15T00:30:43.943 に答える
2

ファーストシングスファースト

すべての新しい学習体験に一般的に適用されるレイアウトtableに変更するときに覚えておくべき非常に重要なことがいくつかあります。div

  1. 何かが機能していないという理由だけでイライラしないでください。ちょっと休憩して、何か他のものを見てください。それは何か新しいものであり、最初はいつもうまくいくとは限らないことを忘れないでください。最終的に機能するまでには、さまざまなアプローチや試みが必要になる場合があります。最終的にはコツをつかむでしょう。

  2. 特にこの場合、特にサイトの主要な構造部分として使用する場合は、とdivsは大きく異なることを覚えておいてください。tablesそれぞれの背後にある思考プロセスは完全に異なり、クリックするのに慣れるのに多くの時間がかかる可能性があります。このため：

  3. すべてのデザインがからtableに移行するわけではありませんdiv。を使用すると、本当に簡単かつ適切に実行できるものもあればtables、を使用して実行するものもありますdivs。これは特にそのようなケースの1つではありませんが、サイトの構造を変更するときは、いくつかの設計変更を行う必要があります。

そうは言っても、これで質問に正しく答えることができます。


答え

これは私が使用して構造を設定する方法ですdivs：

<div id="wrap">
  <div id="header"></div>

  <div id="content">
    <div id="nav2"></div>
    <div id="content_right"></div>

    <div style="clear: both"></div>
  </div>

  <div id="footer"></div>
</div>

そして、これはcssがどうなるかです：

#wrap {
  width: 100%;
}

#header {
  width: 100%;
  height: /* some height value */;
}

#content {
  width: 100%;
  height: /* some height value */;
}

  #nav2 {
    width: 20%;
    float: left;
  }

  #content_right {
    width: 40%;
    float: right;
  }

#footer {
  width: 100%;
  height: /* some height value */;
}


ノート

私が上で言ったように、背後にある思考プロセスtablesとdivsはかなり異なります。をtables使用すると、パーセンテージ（%）を使用して幅を定義することに慣れています。これは機能し、必ずしも悪いことではありません。それは仕事を成し遂げ、行うのは簡単です。

ただし、を使用している場合divs、より一般的なアプローチは、ピクセル（px）で定義された固定幅を使用することです。これにより、ページ全体に広がることのない、より一定したデザインが可能になり、ページが常に同じ幅になることがわかっているため、デザインの自由度が高まります。

固定幅設計の詳細については、960グリッドシステムを参照することをお勧めします。従うのは非常に簡単で、構造とスタイリングが簡単な、すっきりとした見栄えの良いデザインにつながります。

最も重要なことは、新たに発見された自由を享受するdivsことです。それらは何にも固定されておらず、文字通り何でもでき、どこにいても、ページ上の何かのように見えます。彼らができることには実際には制限はありません。それらがウェブページの唯一の必要な部分と呼ばれていると聞きました（あなたは本当にdivs、テキストを含むだけでエンターページをデザインして作成することができます）。

旅を楽しんでください！

于 2012-07-15T00:55:08.710 に答える
0

CSS3スタイル（「display：table;」を使用）：

http://jsfiddle.net/reKfe/を確認してください（ http://query7.com/exploring-the-power-of-css3から作成されたjsFiddle ）

于 2012-07-15T00:38:34.753 に答える