html - 两列，每列三个 DIV

Question

我试图并排放置两列三个垂直 DIV。左栏是主要文本区域，右栏是杂项信息。每列的顶部和底部 DIV 只是一个带有圆 Angular 的图像。中心 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 中删除 position: absoulute;