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_content div 的长度。任何想法？

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

如果您确实要创建边框，psur 是正确的，但如果您的目的是向左和向右创建内容，则将两个边框移动到 main_content 内并将它们的高度设置为 100%。仍然存在一些边际问题，但这会让你上路……

于 2012-10-17T11:32:26.217 回答
0

为了显示您的背景，您需要在 div 中添加一些内容。添加   在左右边框打开和关闭 div 之间

hth

于 2012-10-17T11:33:08.467 回答
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 回答
-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 回答