CSS border问题:无法渲染左边框

我试图在左侧显示一个边框,但它没有显示在第一个div(breadCrumb)之后 . HTML代码如下: -

<div class="contentHolder">
    <div class="breadCrumb">
        <a href="http://www.pricetag.com">Store </a>>>&nbsp;Electronics 
    </div>
    <div class="contentMainDiv">
        <div class="leftDiv"><p>orem ipsume Lorem ipsume Lorem ipsume Lorem ipsume</p>
        </div>
        <div class="rightDiv">
        </div>
    </div>
</div>

CSS代码如下:

.contentHolder {padding:10px 0 0 10px; border-left:1px solid #CCC; } .contentHolder div.breadCrumb {font-size:12px; } .contentHolder div.breadCrumb a {color:#408080;文字修饰:无; } .contentHolder div.breadCrumb a:hover {text-decoration:underline; } .contentHolder div.leftDiv {float:left;宽度:150px; } .contentHolder div.rightDiv {float:left;}

Below is Image for the Error Page : -


enter image description here

回答(3)

2 years ago

你需要在 .contentMainDivclear/contain the floated elements .

一种方法是添加 overflow: hidden .

2 years ago

.contentHolder div.leftDiv{ float:left; width: 150px; }

删除float:left或对contentHolder类使用clearfix http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

预览http://jsfiddle.net/TrePF/

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
.contentHolder { padding: 10px 0 0 10px; border-left: 1px solid #CCC; }

.contentHolder div.breadCrumb { font-size:12px; }

.contentHolder div.breadCrumb a {color:#408080; text-decoration:none; }

.contentHolder div.breadCrumb a:hover {text-decoration:underline; }

.contentHolder div.leftDiv{ float:left; width: 150px; }

.contentHolder div.rightDiv { float:left;}
<div class="contentHolder clearfix">
    <div class="breadCrumb">
        <a href="http://www.pricetag.com">Store </a>>>&nbsp;Electronics 
    </div>
    <div class="contentMainDiv">
        <div class="leftDiv"><p>orem ipsume Lorem ipsume Lorem ipsume Lorem ipsume</p>
        </div>
        <div class="rightDiv">
        </div>
    </div>
</div>

2 years ago

您可以将 float: left;display: inline-block; 添加到 .contentHolder

.contentHolder {
  padding: 10px 0 0 10px;
  border-left: 1px solid #CCC;
  float: left;
}

要么应该工作 .