3

テーブルレイアウトをdivに置き換えるにはどのような方法が最適か疑問に思います。私は自分でいくつか試してみましたが、それは私の4x4divを非常に台無しにしました。私はそのようなことをする経験を持っているときにこれを達成するのはそれほど難しいことではないと思いますが、私はすべてdivに不慣れで、これを学ぼうとしています:)

これを見て、テーブルをそのままにしておくべきか、それともdivに置き換える必要があるかについて意見を共有してください：http：//jsfiddle.net/CZdux/

<table align="center" border="0">
  <tr>
    <td width="430" rowspan="3">    
        <div class="container">
            <div id="a1" class="card"></div>
            <div id="a2" class="card"></div>
            <div id="a3" class="card"></div>
            <div id="a4" class="card"></div>
            <div id="a5" class="card"></div>
            <div id="a6" class="card"></div>
            <div id="a7" class="card"></div>
            <div id="a8" class="card"></div>
            <div id="a9" class="card"></div>
            <div id="a10" class="card"></div>
            <div id="a11" class="card"></div>
            <div id="a12" class="card"></div>
            <div id="a13" class="card"></div>
            <div id="a14" class="card"></div>
            <div id="a15" class="card"></div>
            <div id="a16" class="card"></div>
        </div>   
    </td>
    <td width="161" height="95" align="center" valign="middle">LOGO</td>
  </tr>
  <tr>
4

4 に答える 4

7

テーブルレイアウトをdivに置き換えるにはどのような方法が最適ですか？

displayプロパティを使用して、テーブルのようにすべてを再フォーマットします。;）

HTML

<div class="table-div" style="width:100%">
    <div class="tr-div">
        <div class="td-div">td-div 1a</div>
        <div class="td-div">td-div 2a</div>
        <div class="td-div">td-div 3a</div>
    </div>
    <div class="tr-div">
        <div class="td-div">td-div 1b</div>
        <div class="td-div">td-div 2b</div>
        <div class="td-div">td-div 3b</div>
    </div>
</div>

CSS

.table-div{display:table}
.tr-div{display:table-row}
.td-div{display:table-cell;border:1px solid silver}

ここにjsFiddle

于 2013-03-26T13:46:17.460 に答える
3

フローティングカラム

この場合、HTMLテーブルは必要ありません。

HTMLテーブルはデータグリッドに適していますが、一般的なレイアウト（列の確立など）には、ほとんどの場合、フロートが最適なオプションです（@GrantMynottが提案したように）。このページのカードはグリッドパターンで表示されますが、実際にはデータグリッドではありません。

CSSファイルにclearfixを追加すると、floatの使用（および列の作成）を大幅に簡素化できます。浮動列を持つコンテナーがあるたびに、clearfixクラスをコンテナーに追加します。そうすれば、フロートされた列をクリアする詳細について心配する必要はありません。

これは、clearfixの従来のバージョン（最初は良いバージョンです）を使用した例です。

/* Traditional clearfix */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* Custom CSS for the page layout */
.columns .column1 {
    float: left;
    width: 430px;
}
.columns .column2 {
    float: left;
    width: 161px;
}
....
<div class="columns clearfix">
    <div class="column1">Card grid goes here...</div>
    <div class="co1umn2">All content to the right of card grid goes here...</div>
</div>
<div id="msg"></div>

この例では、CSSクラスの総称名（ "columns"、 "column1"、column2 "）を使用しています。問題のページにとってより意味のある名前を必要に応じて使用できます。

アップデート

改訂されたデモを見た後：

  • クラス名「co12」のタイプミスがあり、その列がフロートするのを妨げていました。そのようなタイプミスの可能性を低くするために、名前を「column2」に更新しました。
  • 安全のために、カードコンテナにもクリアフィックスを追加することをお勧めします（カードはフロートしているため）。現在、カードコンテナは左側の列自体であるため、そこに追加されます。
  • これは個人的な好みかもしれませんが、左に浮かぶものと右に浮かぶものを混在させるよりも、すべての列を同じ方向（通常は左）に浮かせる方が少し安全であることがわかりました。同じコンテナ内での方向の混合は、場合によっては（または、少なくとも古いブラウザでは）安定していませんが、ほとんどの場合、安全です。

更新されたデモ

この時点で、右側の列のコンテンツに高さまたは垂直マージン（またはパディング）を追加する必要があります。これを少し簡単にするために、ロゴ画像の周りにdivコンテナを追加しました。オプションでボタンの周りにdivコンテナを配置することもできますが、divコンテナがなくても管理できる可能性があります。

于 2013-03-26T02:24:22.693 に答える
1

CSSのfloatプロパティを探していると思います。

ゲームのマスを左側にフロートさせ、右側に統計/ロゴなどの別のコンテナを用意する必要があります。

.game-container { float: left; width: 430; }
.stats-container { float: right; width: 161; }
.logo { height: 95; width: 100%; }
.scoreboard { height: 148; width: 100%; }
.restart { height: 148; width: 100%; }
#msg { clear: both; } /* Append to pre-existing identifier to display below immediate left and right floated content */

次に、コンテンツをそのように配置します。divはブロック要素であるため、統計コンテナ内のコンテンツは垂直方向に表示されます。

<div class="game-container">
    <div class="container">
        <div id="a1" class="card"></div>
        ...
    </div>
</div>
<div class="stats-container">
    <div class="logo">LOGO</div>
    <div class="scoreboard"></div>
    <div class="restart"><input id="clicky" type="button" value="Restart"/></div>
</div>
<div id="msg"></div>
于 2013-03-26T00:52:22.283 に答える
1

上記のすべては非常に優れていますが...すべての実験的なcssプロパティがブラウザで利用できなくなるまで、必要に応じて、テーブルを垂直方向の配置または背景の高さに関するdivs dldtdd要素に置き換えるのは非常に難しいことがわかります。たとえば、ウィンドウのサイズを変更する場合や、ネストされたdivを含むdl dt ddの場合、テキストを内部に折り返す場合も同じです。多くの場合、テーブルを他の要素に置き換えることは悪い方法であると私はまだ考えています。すべての良い考えにもかかわらず、テーブルを使用すると、表示要素を必要に応じて完全に制御できます。

于 2017-05-25T08:39:11.490 に答える