4

わかりました。2001年にhtmlとcssを学習しました。私は次のようなことをしていました（「垂直列」レイアウトのWebサイトを作成するため）。

<html>
<head>
    <title>Vertical-column layout</title>
</head>
<body>
<table id="doc" >
<!-- header -->
    <tr>
    <td id="header" colspan="3"><!-- header code/php include --></td>
    </tr>
<!-- / header -->

<!-- / content -->
    <tr>
    <td id="col1" name="menu"><!-- content code/php include --></td>
    <td id="col2" name="content_left"><!-- content code/php include --></td>
    <td id="col3" name="content_right"><!-- content code/php include --></td>
    </tr>
<!-- / content -->

<!-- footer -->
    <tr>
    <td id="footer" colspan="3"><!-- header code/php include --></td>
    </tr>
<!-- / footer -->
</table>
</body>
</html>

簡単で、すべてが自動的に希望どおりに調整され、CSSの頭痛などはありません。当時の生活は良かったです。しかし、それほど昔のことではありませんが、このアプローチはもはや使用されるべきではないことを読みました。たくさんのdivを使用して新しい方法を試すつもりでしたが、w3cとw3cの検証では、ブロック要素をインライン要素として使用するのは好きではありません... WTF !!!

だから...私の欲求不満はあなたたちに尋ねるように私を導きます：

どうやって？このようなことを「現代的な方法」で達成する方法...できるだけ簡単に？HTML 5にはもっと良い方法がありますか？
なぜ？Webサイトで「垂直列レイアウト」を取得するためにこのテーブルアプローチを使用するべきではないのはなぜですか？

HOW?

オプション1：Googleの「CSS3列レイアウト」。これは過去6年ほどにわたって十分にカバーされており、チュートリアルの塊がそこにあります。

オプション2：Googleの「CSSフレームワーク」を選択し、レイアウトを作成します。960.gsは人気のあるものです。

WHY?

理想的には、表形式のデータ用のテーブルとcssを使用して、ページの残りの部分をレイアウトします。なんで？まあ、理論的には、CSSはあなたにもっと多くの柔軟性を与えます。最良の例は、おそらくレスポンシブWebデザインの場合です。iPhoneでは、2列が必要な場合があります。私のiPadでは、4列が必要な場合があります。これはすべてCSSで実行できますが、テーブルを使用してHTMLを配線すると、非常に複雑になります。

4

3 に答える 3

6 
HOW?

オプション 1: Google の「CSS 3 列レイアウト」。これは過去 6 年ほどにわたって十分にカバーされており、そこにはたくさんのチュートリアルがあります。

オプション 2: Google の「CSS フレームワーク」で、いずれかを選択してレイアウトを構築します。960.gs が人気です。

WHY?

理想的には、表形式のデータにはテーブルを使用し、css を使用してページの残りの部分をレイアウトします。なんで？理論的には、CSS を使用すると柔軟性が大幅に向上します。最も良い例は、おそらくレスポンシブ Web デザインの場合です。iPhone では、2 列が必要な場合があります。私の iPad では、4 列が必要な場合があります。これはすべて CSS で行うことができますが、テーブルを使用して HTML を配線すると非常に複雑になります。

于 2012-06-04T19:57:15.583 に答える
5

以下は、私が一緒に石畳にした基本的なグリッドで、あらゆるサイズのWebサイトで使用できます。オーバーフローを非表示にするか、クリアフィックスを使用して、列のフロートをクリアする必要があります。プロジェクトでIE7をサポートする必要がない場合は、box-sizing border-boxを使用して列にパディングを追加できます。それ以外の場合は、各列内にパディング用の要素を追加します。

レイアウトに関しては、テーブルの方が優れているのはテーブルだけで、列の作成が非常に簡単だったことは理解できます。

HTML：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <header></header>

    <div class="content grid">
        <div id="col1" class="col s1of3"></div>
        <div id="col2" class="col s1of3"></div>
        <div id="col3" class="col s1of3"></div>
    </div>

    <footer></footer>

</body>
</html>

CSS：

.grid {
}
    .grid .col { float: left; }

    .grid .col.s1of1 { width: 100%; }
    .grid .col.s1of2 { width: 50%; }
    .grid .col.s1of3 { width: 33.33333333%; }
    .grid .col.s2of3 { width: 66.66666666%; }
    .grid .col.s1of4 { width: 25%; }
    .grid .col.s3of4 { width: 75%; }
    .grid .col.s1of5 { width: 20%; }
    .grid .col.s2of5 { width: 40%; }
    .grid .col.s3of5 { width: 60%; }
    .grid .col.s4of5 { width: 80%; }
于 2012-06-06T15:31:16.863 に答える
2

CSS3にはいくつかのきちんとした列レイアウトオプションがありますが、互換性に関してはあまり良くなく、かなりの数のオプションが多数のブラウザでサポートされていません。

可変/固定幅の列を作成しようとしている場合、これはおそらくあなたが探している記事です：

http://www.alistapart.com/articles/holygrail

この方法を使用すると、1つまたは複数のdivを固定幅に設定し、別のdivをページ全体に適切にサイズ変更することができます。

すべての列のサイズを変更したい場合は、すべての列を作成しfloat: left、width: {percentage of page}%

于 2012-06-04T19:58:17.917 に答える