兩列三個DIV的每個

Question

我想要放置兩列三個垂直DIV的並排。左欄是主文本區域，右欄是misc信息。 每列的頂部和底部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

我將建立一個有些不同的方式包裹在自己的格每一列，但無論如何，頁面佈局修改你的CSS是這樣的：

在 .rtcolbody
• 和.mainbody套height: auto;或者乾脆刪除了這一行
• 在.rtcolbody .text和.mainbody .text刪除position: absoulute;

Answer 2

如果我和你的風格的代碼去，所以你應該在你的CSS的一些變化，因爲我提的如下： -

刪除從課堂上定位。 文字和班出最小高度型主體 ....

.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; 

    } 

而且有一個你的問題的另一種方法，CSS3，你可以給曲線和背景透明到你中看到的演示： - http://jsfiddle.net/8LFLd/31/

並通過這種方法，你可以增加和減少背景的不透明度，並且不會影響你的盒子裏面的文本顏色它的簡單看到css基本上你必須在背景中使用rgb顏色f或不透明&你不需要使用圖像和額外的div的頂部，中部，底部等