2

以下は私のHTMLコードです。

 <body>
 <div id="wrapper">
 <div id="left_border"></div>
 <div id="main_content">
 some text </br>
 some text </br>
 some text </br>
 some text </br>
 </div>
 <div id="right_border"></div>
 </div>
 </body>

これが私のCSSです。

  #wrapper {
  margin: 25px 20px;
  height: auto;
  }

  #left_border, #right_border {
  display: block;
  width: 20px;
  background-color: #ff0000;
  }

  #left_border {
  float: left;
  }

  #right_border {
  float: right;
  }

私の問題は、ボーダーdivを紹介できないことです。main_contentdivの長さまで両方の境界線を表示する必要があります。何か案が？

4

6 に答える 6

2

bordercssプロパティを使用することをお勧めします。例えば：

div#main_content {
    border-left: 20px solid #ff0000;
    border-right: 20px solid #ff0000;
}

divそして、国境のための偽物はありません。

于 2012-10-17T11:30:50.813 に答える
1

このようなもの？http://jsfiddle.net/6ZGXd/3/境界線はコンテンツdivと同じ高さになります。

于 2012-10-17T11:33:44.167 に答える
0

高さを設定する#left_border, #right_border

#left_border, #right_border {
display: block;
width: 20px;
height: 80px;
background-color: red;
}

そしてこのコード#main_content{width：200px; フロート：左; }

デモリンク：

于 2012-10-17T11:31:45.690 に答える
0

psurは、実際に境界線を作成しようとしている場合は正しいですが、コンテンツを左右に作成することが目的の場合は、2つの境界線をmain_content内に移動し、高さを100％にします。まだいくつかのマージンの問題がありますが、それはあなたを途中で連れて行きます...

于 2012-10-17T11:32:26.217 に答える
0

背景を表示するには、divにコンテンツが必要です。追加＆nbsp; 左右の境界線の開閉divの間

hth

于 2012-10-17T11:33:08.467 に答える
-1

実際、少し間違ったマークアップを作成した場合は、次のようにマークアップを作成する必要があります：-

HTML

<div id="wrapper">
     <div id="main_content">
     some text </br>
     some text </br>
     some text </br>
     some text </br> some text </br> some text </br> some text </br> some text </br> some text </br>    some text </br>
     </div>
     </div>

CSS

#wrapper {
  margin: 25px 20px;
  }

#main_content {
  border-right:2px solid red;
  border-left:2px solid red;
}

http://tinkerbin.com/IwKyVILk

于 2012-10-17T11:31:03.600 に答える