ウェブページ内の部門を整列する

Question

私はHTML5、CSS3を使用してウェブページを構築しようとしています。 私は4つの異なる部門に分かれている4つのリストを持っています。他の部門#position_callsは上記のすべての部門の親です。

私は、これらの4つのリストを2 * 2の配列形式で配置したいと考えています。各ボックスの高さは同じにしてください。私は "フロート"キーワードを使用してこれを試みたが、それはうまくいきませんでした。

JSFiddle。

#tech_calls{ 
    float:left; 
    border:2px solid green; 
    width:49%; 
    height:50%; 
    margin:auto; 
} 
#quantech_calls{ 
    float:right; 
    border:2px solid green; 
    width:49%; 

} 

「位置」キーワードを使用しないようにしてください。これは反応性の高いページを妨害する可能性があるためです。

また、div #position_callの親赤い枠線が、（子divを含む）全領域をカバーしない理由を理解できません。しかし、すべての子divからfloatプロパティを削除すると、うまく動作します。 JSFIDDLE. フロートはこれと関係がありますか？

ご協力いただければ幸いです。

Javascriptに精通しています。ありがとうございました！

Answer 1

表示プロパティと、上位2つのdivと下位2つのdivの1つの親divを追加しました。それをチェックしてくださいhere。したがって 、他の二つのための同様

<div style="display:flex"> tech_calls Div quantech_calls Div </div>

。