それぞれ3つのDIVの2つの列

Question

私は3つの縦のDIVを並べて2つの列を配置しようとしています。左側の列はメインのテキスト領域で、右側の列はその他の情報用です。 各列の上部と下部のDIVは角が丸いイメージに過ぎません。中央のDIVはテキストのためのものです。さらに、理想的には、各列の中央のDIVがテキストの内容に比例して自動的に垂直方向に拡張されるようにします。続き

は私のCSSです：

.main_bkgd_tp_img { 
    background: url(../images/text.main.tp.gif); 
    float:left; 
    width: 400px; 
    height: 20px; 
} 
.main_bkgd_btm_img { 
    background: url(../images/text.main.btm.gif); 
    float:left; 
    width: 400px; 
    height: 20px; 
} 
.mainbody { 
    background: url(../images/text.main.fill.gif); 
    position:relative; 
    float:left; 
    width: 400px; 
    height: 300px; 
} 
.mainbody .text { 
    position:absolute; 
    top:10px; 
    left:20px; 
    width:95%; 
} 
.mainbody p { 
    position:relative; 
    font:normal 12px verdana, arial, helvetica, sans-serif; 
    color:#000; 
    line-height:15px; 
} 
.mainbody h1, h2 { 
    position:relative; 
    color:#000; 
    line-height:15px; 
    } 
.rtcol_bkgd_tp_img { 
    background: url(../images/rtcol.main.tp.gif); 
    float:right; 
    width: 100px; 
    height: 20px; 
    } 
    .rtcol_bkgd_btm_img { 
    background: url(../images/rtcol.main.btm.gif); 
    float:right; 
    width: 100px; 
    height: 20px; 
} 
.rtcolbody { 
    background: url(../images/rtcol.main.fill.gif); 
    position:relative; 
    float:right; 
    width: 100px; 
    height: 300px; 
} 
.rtcolbody .text { 
    position:absolute; 
    top:10px; 
    right:20px; 
    width:95%; 
} 
.rtcolbody p { 
    position:relative; 
    font:normal 12px verdana, arial, helvetica, sans-serif; 
    color:#000; 
    line-height:15px; 
} 
.rtcolbody h1, h2 { 
    position:relative; 
    color:#000; 
    line-height:15px; 
} 

そして、次は私のHTMLです：

<div class="main_bkgd_tp_img"></div> 
<div class="mainbody"> 
     <div class="text"> 
      <h4> This is made up text just for testing purposes. The real text will be added later.</h4> 
      <h4> This is more made up text just for testing purposes. The real text will be added later. </h4> 
     </div> 
    </div> 
    <div class="main_bkgd_btm_img"></div> 
    <div class="rtcol_bkgd_tp_img"></div> 
    <div class="rtcolbody"> 
     <div class="text"> 
      <h4> This is a test. </h4> <br/> 
      <h4>This text is just for testing purposes. The real text will be added later. </h4> 
     </div> 
</div> 
<div class="rtcol_bkgd_btm_img"></div> 

プロセスにおける実際のページがhereを見ることができます。

ありがとうございました！

---

私はこれを考え出したと信じています。 "rtcol _...." CSSエントリのそれぞれについて、 "float：right"を "margin-left：420px"に変更しました。

中間のDIVを自動的に。！テキストコンテンツ

おかげ

Answer 1

私はとにかく、独自のdiv内の各列を包むが、少し異なる方法でページレイアウトを構築するだろうあなたはこのようにCSSに変更します。

.rtcolbodyで

• と.mainbodyセットheight: auto;または単に.rtcolbody .textと.mainbody .textにその行
• を削除し、私は以下の言及していて、あなたのCSSでのいくつかの変更をしなければならないので、私は、あなたのスタイルのコードで行く場合position: absoulute;

Answer 2

を削除します -

削除ポジションからのクラスです。 テキストとクラスにメインボディ ....

.mainbody { 
    background: url("../images/text.main.fill.gif") repeat scroll 0 0 transparent; 
    float: left; 
    min-height: 300px; 
    opacity: 0.8; 
    position: relative; 
    width: 450px; 
}   

.mainbody .text { 
     padding: 20px 12px; 

    } 

そしてそこに1あなたの質問の他のCSS3方法を最小の高さを与え、あなたはデモを参照してください曲線とあなたのボックスに背景透明を与えることができます：http://jsfiddle.net/8LFLd/31/

この方法では、背景の不透明度を増減することができます。これは、ボックス内のテキストの色には影響しません。シンプルに表示するには、基本的に背景アルファfのrgbカラーまたは不透明度& の上、中、下の画像と余分なdivは不要など