web-dev-qa-db-ja.com

レイアウト列-等しい高さ

私は最初にレイアウトにテーブルを使用し始めたことを覚えており、私はそれをしてはならないことを学びました。私は新しいサイトに取り組んでおり、テーブルを使用せずに同じ高さの列を作成できないようです。 divタグを使用した試みの例を次に示します。

<div class="row">
<div class="column">column1</div>
<div class="column">column2</div>
<div class="column">column3</div>
<div style="clear:both"></div>
</div>

今私が試したのは、列を左にフロートし、幅を33％に設定してうまくいくことでした.clear：both divを使用して、行が最大の列のサイズになるようにしますが、列は異なるサイズになりますコンテンツの量に基づいています。私は、主にcssハックに関連する多くの修正を見つけましたが、それを正しいように見せていますが、それは私が望んでいるものではありません。私はちょうどJavaScriptでそれを行うことを考えたが、その後、彼らのjavascriptを無効にすることを選択した人にとっては異なって見えるでしょう。私が考えることができる唯一の真の方法は、セルのすべてが同じ行に同じ高さを持っているため、テーブルを使用することです。しかし、テーブルを使用するのが悪いことは知っています。永遠に検索した後、私はこれに出くわしました： http://intangiblestyle.com/lab/equal-height-columns-with-css/ それがするように見えることは、テーブルとまったく同じですテーブルとまったく同じように表示を設定します。それを使用すると、テーブルを使用するのと同じくらい悪いでしょうか？正直なところ、私にできることは他にありません。

編集

@Su '「偽物の列」を調べましたが、それが私が望んでいるとは思いません。 display：tableメソッドを使用して、サイトにもっと良いデザインを実装できると思います。この質問を投稿したのは、ウェブサイトのレイアウトでテーブルを使用するのが悪いといつも聞いていたので、そうすべきかどうかわからなかったからです。

htmlcsslayoutwebsite-design
2
Kyle

いいえ、display: table、display: table-row、およびdisplay: table-cellを使用しても、<table>タグを使用するほど悪くはありません。その理由は、HTMLがsemantic言語であり、使用されるタグが内部のコンテンツを記述する必要があることを意味するためです。この場合、CSSを使用して、データをどのように表示するかをブラウザーに説明できます。表示する機能はテーブルの機能であるため、すぐに実行できます。

ただし、 IE7以前ではサポートされていません と言います。

追伸また、Stack Overflowで チェックアウト いくつかの 同様の質問 を使用することもできます。

3
Nightfirecat

列が正しく機能しない場合に列が表示される狭い画面を避けるために、メディアクエリで次のように列を使用することをお勧めします。 ChromeとSafari（-webkit）およびFirefox（-moz）向けにコーディングされています。必要に応じて列数と列ギャップを変更できます。かなり信頼できると思います。

@media only screen and ( min-width: 1200px ) { 
  .two-col {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
      -webkit-column-gap: 1.5rem;
         -moz-column-gap: 1.5rem;
              column-gap: 1.5rem
  }
}

他のアイテム。たとえば、1行が12行で、もう1行が11行であるかどうかに関係なく、列を上部に揃える必要がある場合は、vertical-align: topも追加できます。

1
Michael Moriarty