3

divシンプルな3行（テーブルレスコンセプト）を作りたい。

Googleですべてを試しましたが、単純な形式は得られませんでした。

たとえば、表では、次のように簡単でした。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td>&nbsp;</td>
   </tr>
</table>

ここで非常に簡単な質問をしている場合は申し訳ありません。

4

4 に答える 4

8

HTML4およびHTML5メソッド

可能な限り少ないコードで要素をコーディングするのが最善の場合があります。以下に、HTML5およびHTML4Doctypeの列と行の理想的なコーディングを示します。HTML5はDIVに置き換わるものではないことに注意することが重要ですが、私の例では、コードを削減することを意味する場合は、HTML5を使用する必要がない場合があることを示しています。

3列追加のdivのない単純なHTML5メソッド

HTML5

<article id="fruits">

    <hgroup>    
        <h1>Some of My Favorite Fruits</h1>
        <h2>I generally prefer fruits that are not to sweet</h2>
    </hgroup>

    <section>
        <h2>Bananas<h2>
        <p>Some Text..</p>
    </section>

    <section>
        <h2>Kiwi<h2>
        <p>Some Text..</p>
    </section>

    <section>
        <h2>Pears<h2>
        <p>Some Text..</p>
    </section>

</article>

CSS

#fruits section {width:100%;padding:20px 0;}

クラスが少ない単純なHTML4メソッドを使用した3列

HTML4

<div class="3-columns">

    <div>I'm Column 1</div>

    <div>I'm Column 2</div>

    <div>I'm Column 3</div>

</div>

CSS

.3-columns {}
.3-columns div {width:100%;padding:20px 0;}

追加のdivなしで単純なHTML5メソッドを使用する3行

HTML5

<article id="fruits">

    <hgroup>    
        <h1>Some of My Favorite Fruits</h1>
        <h2>I generally prefer fruits that are not to sweet</h2>
    </hgroup>

    <section>
        <h2>Bananas<h2>
        <p>Some Text..</p>
    </section>

    <section>
        <h2>Kiwi<h2>
        <p>Some Text..</p>
    </section>

    <section>
        <h2>Pears<h2>
        <p>Some Text..</p>
    </section>

    <div class="clear"> </div>

</article>

CSS

#fruits section {float:left;width:33.3%;}
.clear {clear:both;}

クラスが少ない単純なHTML4メソッドを使用した3行

HTML4

<div class="3-rows">

    <div>I'm Row 1</div>

    <div>I'm Row 2</div>

    <div>I'm Row 3</div>

</div>

CSS

.3-rows {}
.3-rows div {width:33.3%;float:left;}
于 2013-02-03T19:32:52.997 に答える
3

あなたがしなければならないのは、1つのdivを作成することだけです。そのために、3つの子divを作成します。

<div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
</div>

これはデフォルトのスタイルで機能するはずです。コンテンツの行が表示されます。特定のスタイリングについてさらにサポートが必要な場合は、コメントしてください。

于 2013-02-03T18:57:49.940 に答える
1

他の人がサイトで以前に指摘したように、表形式のデータを表示するためにdivの代わりにtableタグを使用することをお勧めします。

<div>タグとCssのみを使用してテーブルを作成する方法を参照してください

于 2013-02-03T18:56:36.730 に答える
1

1行に3列

<div>
   <div class="id">Stack</div>
   <div class="id">Overflow</div>
   <div class="id">Rulez</div>
</div>

そしてスタイルコード：

<style type="text/css" media="screen">
   .id {
      width:33%;
      float:left;
   }
</style>

1列に3行

<div>
   <div>Stack</div>
   <div>Overflow</div>
   <div>Rulez</div>
</div>
于 2013-02-03T18:57:28.527 に答える