Question

以下是我的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长度的边框。有什么想法吗？

Answer 1

最好使用border css属性。例如：

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

没有伪造div的边界。

Answer 2

这样的东西？ http://jsfiddle.net/6ZGXd/3/边框与内容div的高度相同。

Answer 3

在#left_border, #right_border

中设置身高

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

和这段代码 #main_content { 宽度：200px; 向左飘浮; }

Demo Link:

Answer 4

psur是正确的，如果你真的想要创建一个边框，但如果你的目的是左右创建内容，那么移动main_content内的两个边框并给它们100％的高度。仍有一些保证金问题，但这会让你在路上......

Answer 5

为了显示您的背景，您需要div中的一些内容。添加＆amp; nbsp;在左右边界开口之间关闭divs

HTH

Answer 6

实际上你做了一些错误的标记你应该像这样编写标记： -

<强> 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

仅显示背景色的Div

6 个答案: