0

関連する（おそらく重複する）質問：

HTML / CSS で同じ高さの div を実現するにはどうすればよいですか?

2 つのフローティング CSS 要素を同じ高さにする

こんにちは、みんな、

伸縮可能な 2 列の div を作成しようと何時間も試みましたが、うまくいきませんでした。これが私のhtmlコードとその下の私のcssコードです

<div class="two_cols_container">
  <div class="two_cols">
    <div class="left-col">
      test
    </div>
    <div class="right-col">
      test
    </div>
  </div>
</div>

私のcssコードは

.two_cols_container {
  width: 100%;
  height: 100%;
} 
.two_cols {
  position: relative;
  margin: 0 auto;
  border: 1px solid black;
  height: 100%;
  height: auto !important;
  min-height: 100%; 
}
.two_cols .left-col {
  /*position: absolute;
    left: 0;*/
  float: left;
}
.two_cols .right-col {
  /*position: absolute;
    right: 0;*/
  float: right;
}

何か案が？

4

5 に答える 5

2

あります

  1. テーブル (おそらくこれに依存したくないでしょう)
  2. フェイクコラム (最も実用的な方法で、画像を使用してコラムを偽造します - http://www.alistapart.com/articles/fauxcolumns/を参照)
  3. ボーダー トリック (少し複雑ですが、単色でのみ機能します)
  4. パディング / マージン / クリッピング (もう 1 つの複雑なものはお勧めしません)

私は＃2で行きます。これらの列の背景色を下まで下げる必要がある場合は、それらの列のコンテナに背景を設定し、垂直方向に繰り返されるようにします。

div#wrapper { background:url(/images/faux.gif) repeat-y; }

列がフローティングされている場合は、overflow:hidden と、幅などの IE の hasLayout トリガーがあることを確認してください。

ちなみに、float があるので、overflow:hidden を .two_cols セレクターに適用し、次のルールを追加します。

html、本文 { 高さ:100%; }

于 2009-07-26T12:59:18.253 に答える
2

A: float または絶対配置を使用して列を作成します。両方ではありません。両方の列を左にフロートするだけで、絶対的な配置がなくても問題ありません。

B: 大きな問題は、両方の幅が 100% の場合、列を隣り合わせにできないことです。両方とも幅全体を占める場合、それらを含む要素に並べて配置する方法はありません。幅は最大でも 50% に設定しますが、ブラウザのバグを考慮してもう少し低くします。

編集：余白とパディングも収まる必要があるため、幅を50％未満に湿らせます。

于 2009-07-26T13:03:40.660 に答える
0

この方法は、すべての等高 2 列レイアウトの中で最も単純で効果的であることがわかりました。何も偽造する必要はありません。

于 2009-07-26T13:23:04.297 に答える
-1

流動的な 2 列のレイアウトが必要な場合は、両方の列をページに配置するために、両方の列の余白を個別に設定する必要があります。

于 2009-07-26T13:13:21.953 に答える
-1

div スタイル プロパティを使用して、必要な CSS 効果を使用して、必要な数の列を作成できます。

<div style=”width: 100%;”&gt;

<div id=”left” style=”float: left;">

<--! your text here -->

</div>

<div id=”right” style=”float: right;">

<--! your text here -->

</div>

</div>

ソースと例 : WordPress チュートリアル シリーズ - HTML と CSS の基本

于 2012-01-24T20:47:34.267 に答える