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

我会以不同的方式构建页面布局，将每个列包装在自己的div中，但无论如何。像这样修改你的css：

在.rtcolbody和.mainbody设置height: auto;或只是删除该行
在.rtcolbody .text和.mainbody .text删除position: absoulute;

Answer 2

如果我使用您的样式代码，那么您应该在CSS中进行一些更改，如下所示： -

从班级文字中删除定位，并将min-height提供给班级主体 ....

.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基本上你必须在背景alpa中使用rgb颜色来获得不透明度和＆amp;你不需要为顶部，中部，底部等使用图像和额外的div。

两列三个DIV各一个

2 个答案: