2009-06-18 10 views
1

私は2つの子divを親divを共有する方法を知っています。HTML: "fluidly"の親divを分割

左の列にデータベースのテキスト(1つの単語)が含まれるようにします。これは1〜10文字の長さにすることができます。左の列の幅を単語に完全に合わせたいので、私はそれに幅を設定しません。

次に、残りのスペースを右の列に埋めるようにしていました。

これを行う簡単な方法はありますか?

これを実現するために、右の列のCSSをどのように設定するのかよく分かりません。

<div id="parent_div" style="width: 100px; height: 100px;"> 
    <div style="background-color:blue; float:left;" id="left_column"> 
      blue 
    </div> 
    <div style="background-color:red; float: left;" id="right_column"> 
      red 
    </div> 
</div> 

私はあなたがそれをセット幅を与えることなく浮いて何かを持つべきではない読んで、しかしそれは、私は不可能だろう欲しいもののように思えます。

おかげ

答えて

0

まあ、スタートのために、私はあなたが右へ右列フロートさせることを示唆している - 左の列の隣にそれを置く必要があります。しかし、左の列の幅についてはわかりません。

1

2番目のdivをフローティングしないと、効果が得られると思います。

<body> 
<div id="parent_div" style="width: 100px; height: 100px;"> 
<div id="left_column" style="background-color: blue; float: left;"> blue </div> 
<div id="right_column" style="background-color: red;"> red </div> 
</div> 
</body> 

これはまさにあなたが望むものです。赤色の列は、青色の列で取り込まれていない残りの領域を占有します。

+0

人に感謝します。今は私が馬鹿に見えるので、これは簡単ではなかった。 –

+0

問題ありません。あなたの問題を解決するならば、答えは「受け入れられる」とマークする必要があります。 – womp