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

3 回答

• 1

  你需要在 .contentMainDiv 中clear/contain the floated elements .

  一种方法是添加 overflow: hidden .

  回复于 2024-04-26T05:58:19+08:00
• 1

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

  回复于 2024-04-26T05:58:19+08:00
• -1

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

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

  要么应该工作 .

  回复于 2024-04-26T05:58:19+08:00