0

3 つの垂直 DIV の 2 つの列を並べて配置しようとしています。左の列はメインのテキスト領域で、右の列はその他の情報です。各列の上部と下部の 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

私があなたのスタイルコードを使用する場合、以下で言及しているように、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;

    }

そして、ボックスに透明な曲線と背景を与えることができるあなたの質問のもう1つのCSS3メソッドがありますデモを参照してください：- http://jsfiddle.net/8LFLd/31/

そして、この方法を使用して、背景の不透明度を増減できます。ボックス内のテキストの色には影響しません。基本的にCSSを参照してください。不透明度のためにバックグラウンドアルパでRGBカラーを使用する必要があり、画像を使用する必要はありません上、中、下などの追加のdiv 。

于 2012-04-23T11:25:28.190 に答える
0

各列を独自の div にラップする少し異なる方法でページ レイアウトを作成しますが、いずれにせよ。css を次のように変更します。

  • .rtcolbodyその行を設定.mainbodyまたはheight: auto;単に削除する
  • .rtcolbody .text入れて.mainbody .text取り除くposition: absoulute;
于 2012-04-23T07:52:44.540 に答える