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

Question

我试图在左侧显示边框，但在第一个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;}

下面是错误页面的图片： -

---

Answer 1

您需要.contentMainDiv中的clear/contain the floated elements。

一种方法是添加overflow: hidden。

Answer 2

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

Answer 3

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

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

应该都可以。