ダイナミックな幅のDIVを設定する方法

StackOverflow https://stackoverflow.com/questions/933494

  •  06-09-2019
  •  | 
  •  

質問

ここに私のシナリオです。私はそれの内側（n）の子要素を持つコンテナのdivを持っています。このインスタンスが言うことができますのコンテナのdiv内の2つのdivがあります：

<div id="container">
    <div id="col1">
        Stuff in col1
    </div>
    <div id="col2">
        Stuff in col2
    </div>
</div>

コンテナのdivがビューポートの割合になるだろう、80％を言います。さて、私が探しているお互いにインラインであることと空間の同じ量を取るために、これらの2つの内部のdiv（COL1＆COL2）のためです。だから、結果は次のようになります。

+-------------- container -------------+
|  +---- col1 ----+  +---- col2 ----+  |
|  | stuff in     |  | stuff in     |  |
|  | col1         |  | col2         |  |
|  +--------------+  +--------------+  |
+--------------------------------------+

または変更されたコンテナの幅は、このようなものになるかどうます：

+------------------------------ container -----------------------------+
|  +------------ col1 ------------+  +------------ col2 ------------+  |
|  | stuff in col1                |  | stuff in col2                |  |
|  | stuff in col1                |  | stuff in col2                |  |
|  +------------------------------+  +------------------------------+  |
+----------------------------------------------------------------------+

内のdivは常に同じ幅であり、互いからいくらかの分離を有します。これは、テーブルのレイアウトに似ていますが、可能であれば私はむしろ、テーブルを使用することはありません。私は、フローティングと無駄にインラインdivを表示するなど、さまざまなテクニックを試してみました。彼らはちょうど合わせるように見えることはありませんことができます。

役に立ちましたか？

解決

表のセルが自動的に伸びる可能性があります。それはdivと正確にはできませんので、あなたは手で各列の適切な幅を指定する必要があります。たとえばます：

#col1, #col2 {
    float: left;
    width: 50%;
}

他のヒント

とCOL1とCOL2スパン（ないのdiv）を作ります 
vertical-align:top
display:inline-block
width:50%

は明らかに（あなたのマージン/パディングを考慮して幅を調整して、彼らはすぐ下に100％見るためには上に追加しますので、あなたはマージン/パディングのための比率を使用することをお勧め：<のhref = "http://ejohn.org/ブログ/サブピクセル問題インCSS /」REL = "nofollowをnoreferrer"> http://ejohn.org/blog/sub-pixel-problems-in-css/ の）

マイ好ましい解決策

外容器に使用する位置決め相対

#container, #container > div  
{
    position: relative;
}

#col1  
{
     left: 2%; /* your margin */
}

#col2  
{
     right: 2%;
}

#container > div 
{
     width: 47%;
}

あなたが途中でほぼ同じ2％を残すことに注意してください。 #col1と#col2は今、整列する必要があります。

その他ソリューション

CSS3付： column-count: 2 に使用し、最初のdiv後の列を破ります。

あなたが本当に浮いように感じる場合は、ないだけ#col1 { float: left; width: 50%; } 

#container{
overflow: hidden
} 

#col1, #col2 {
    float: left;
    width: 50%;
}

たぶんdisplay: table;の使用が役立つだろうか？ http://jsfiddle.net/g4dGz/119/する

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top