0

我正在尝试并排放置两列三个垂直 DIV 的列。左栏是主要文本区域，右栏是杂项信息。每列的顶部和底部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>

可以在此处查看正在处理的实际页面。

谢谢！

我相信我想通了。对于每个“rtcol_....”CSS 条目，我将“float:right”更改为“margin-left:420px。

我仍然需要知道如何使中间 DIV 与文本内容相关联自动扩展。

谢谢！

4

2 回答 2

0

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

  • 并设置.rtcolbody或简单地删除该行.mainbodyheight: auto;
  • 进入.rtcolbody .text并.mainbody .text移除position: absoulute;
于 2012-04-23T07:52:44.540 回答
0

如果我使用您的样式代码，那么您应该对 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，基本上您必须在背景 alpa 中使用 rgb 颜色来获得不透明度，并且您不需要使用图像以及顶部、中间、底部等的额外 div。

于 2012-04-23T11:25:28.190 回答