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の背景色が無視されるようです。そして、私がさまざまなウェブサイトから試した他のコードは、私の構造に変換することができないようです。

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

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

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

#right divの後、ただしコンテンツdiv内。これにより、コンテンツdivが2つの内部の浮動divを囲むようになります。

これは私にとってはうまくいきます。画面を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>

これを行う別の方法overflow:hidden;は、フロート要素の親要素に追加することです。

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

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

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

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

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

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

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

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

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

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

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

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

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

理由が何であれ、私はクリアリングアプローチが好きではなかったので、このようなことについてはフロートとパーセンテージ幅に依存しています。

簡単なケースで機能するものは次のとおりです。

#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

子供のdiv inline-blockを作ると、彼らは並んで配置されます：

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

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

デモを見る

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

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

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

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

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

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>

フロートはフローに影響しません。私が行う傾向があるのは、

<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;
}
/*  */

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

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

最近では、自尊心のある人なら誰でも、フロートを清掃するという「micro-clearfix」アプローチを使用する必要があります。

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

2. 子DIVごとに幅％を設定します。

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

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

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