两列三个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的顶部，中部，底部等