web-dev-qa-db-ja.com

CSSを使用してDivを2列に分割

私はCSSを使用してdivを2つの列に分割しようとしましたが、まだ機能させることができていません。私の基本構造は次のとおりです。

<div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

左右のdivをそれぞれの位置（左右）にフロートさせようとすると、コンテンツdivの背景色が無視されるようです。また、さまざまなWebサイトから試した他のコードは、私の構造に変換できないようです。

助けてくれてありがとう！

csshtmlcss-float
79
PF1

これらの2つのdivをフロートすると、コンテンツdivの高さがゼロになります。追加するだけ

<br style="clear:both;"/>

#right divの後、コンテンツdiv内。これにより、コンテンツdivが2つの内部のフローティングdivを囲むようになります。

58
Rob Van Dam

これは私に適しています。画面を2つの半分に分割しました：20％と80％：

<div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>
74
Navish

これを行うもう1つの方法は、overflow:hidden;を浮動要素の親要素に追加することです。

overflow：hiddenは、フロートされた要素に収まるように要素を成長させます。

この方法では、別のhtml要素を追加するのではなく、すべてcssで実行できます。

47
tybro0103

これを行う最も柔軟な方法：

#content::after {
  display:block;
  content:"";
  clear:both;
}

これは、＃contentに要素を追加するのとまったく同じように機能します。

<br style="clear:both;"/>

しかし、実際に要素を追加することはありません。 :: afterは擬似要素と呼ばれます。これが__contentにoverflow:hidden;を追加するよりも優れている唯一の理由は、絶対位置の子要素がオーバーフローしても表示されるようにするためです。また、ボックスシャドウを表示したままにすることもできます。

16
tybro0103

クリア方法が好きではない理由が何であれ、このようなことはフロートとパーセンテージ幅に依存しています。

簡単なケースで機能するものを次に示します。

#content { 
  overflow:auto; 
  width: 600px; 
  background: gray; 
} 

#left, #right { 
  width: 40%; 
  margin:5px; 
  padding: 1em; 
  background: white; 
} 

#left  { float:left;  }
#right { float:right; }

いくつかのコンテンツを入れると、それが機能することがわかります：

<div id="content">
  <div id="left">
     <div id="object1">some stuff</div>
     <div id="object2">some more stuff</div>
  </div>

  <div id="right">
     <div id="object3">unas cosas</div>
     <div id="object4">mas cosas para ti</div>
  </div>
</div>

ここで見ることができます： http://cssdesk.com/d64uy

9
user18015

子divをinline-blockにすると、それらは並んで配置されます。

#content {
   width: 500px;
   height: 500px;
}

#left, #right {
    display: inline-block;
    width: 45%;
    height: 100%;
}

デモ を参照してください

8
Oriol

Divを垂直に分割する最良の方法-

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}
3
UberNeo

私はこの投稿が古いことを知っていますが、あなたがまだもっと簡単な解決策を探しているなら。

#container .left,
#container .right {
    display: inline-block;
}

#container .left {
    width: 20%;
    float: left;
}
#container .right {
    width: 80%;
    float: right;
}
2
TheHive

与えられた答えはどれも元の質問に答えません。

問題は、cssを使用してdivを2列に分割する方法です。

上記の答えはすべて、2つの列をシミュレートするために、実際には2つのdivを単一のdivに埋め込みます。動的な方法でコンテンツを2つの列にフローすることはできないため、これは悪い考えです。

したがって、上記の代わりに、次のようにCSSを使用して2列を含むように定義された単一のdivを使用してください...

.two-column-div {
 column-count: 2;
}

上記をクラスとしてdivに割り当てると、実際にはその内容が2つの列に流れます。さらに進んで、マージン間のギャップを定義することもできます。 divのコンテンツによっては、コンテンツが列間で途切れないように、Wordのブレーク値を台無しにする必要がある場合があります。

1
Rodney P. Barbati

フロートはフローに影響しません。私がしがちなのは

<p class="extro" style="clear: both">possibly some content</p>

「ラッピングdiv」の最後（この場合はコンテンツ）。そのような段落が必要になるかもしれないと言うことで、意味論的にこれを正当化できます。別のアプローチは、clearfix CSSを使用することです：

#content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#content {
  display: inline-block;
}
/*  \*/
* html #content {
  height: 1%;
}

#content {
  display: block;
}
/*  */

コメントのトリックは、ブラウザ間の互換性のためです。

1
Gazzer
  1. 親DIVでフォントサイズをゼロに設定します。

  2. 各子DIVの幅％を設定します。

    #content {
    font-size: 0;
}

#content > div {
    font-size: 16px;
    width: 50%;
}

* Safariでは、動作させるために49％を設定する必要がある場合があります。

0
Berezh

分割を2列に分割するのは非常に簡単です。これを配置すると（幅：50％など）列の幅をより適切に指定し、左列にfloat：leftを、右列にfloat：rightを設定します。

0
Rashid Jorvee

flexbox を使用して、div要素のレイアウトを制御できます。

* { box-sizing: border-box; }

#content {
  background-color: rgba(210, 210, 210, 0.5);
  border: 1px solid #000;
  padding: 0.5rem;
  display: flex;
}

#left,
#right {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid #fff;
  padding: 0.5rem;
  flex-grow: 1;
  color: #fff;
}
<div id="content">
  <div id="left">
     <div id="object1">lorem ipsum</div>
     <div id="object2">dolor site amet</div>
  </div>

  <div id="right">
     <div id="object3">lorem ipsum</div>
     <div id="object4">dolor site amet</div>
  </div>
</div>
0
Mohammad Usman

これはここで最もよく答えられます 質問21138

最近では、自尊心のある人は、フロートをクリアするという「マイクロクリアフィックス」アプローチを使用する必要があります。

0
Jbird