css - 列 div float 问题

Question

我正在尝试创建两列布局。左栏包含链接列表。右栏包含主要内容，其中包含带有图像的段落列表。对于每个元素，段落应位于图像的左侧。元素由水平线分隔。我的问题是，无论我把一个清晰的 float 放在哪里，都会弄乱一些东西。段落+图像元素和行彼此重叠，或者右栏内容根据左栏的高度被向下推。这是我所拥有的:

<div id="container">

  <div id="header">
        ...
  </div>
  <div id="subheader">
   ...
  </div>
  <div id="sidebar1">
    (list of links here)
  </div>
  <div id="mainContent">
    <div class="tabcontent hide" id="cont-3-1-1"> 
         <div class="fltlft">
         <div class="title">...</div>
                <div class="subtitle">...</div>
                <div class="text">
                ...
                </div>
         </div>
         <div><img src="image.png" /></div> 
         <br class="clearfloat" />        

         <br /><div class="line"></div><br />

         <div class="fltlft">
         <div class="title">...</div>
                <div class="subtitle">...</div>
                <div class="text">
                ...
                </div>
         </div>
         <div><img src="image.png" /></div> 
         <br class="clearfloat" />        

         <br /><div class="line"></div><br />

         <div class="fltlft">
         <div class="title">...</div>
                <div class="subtitle">...</div>
                <div class="text">
                ...
                </div>
         </div>
         <div><img src="image.png" /></div> 
         <br class="clearfloat" />        

         <br /><div class="line"></div><br />

         <div class="fltlft">
         <div class="title">...</div>
                <div class="subtitle">...</div>
                <div class="text">
                ...
                </div>
         </div>
         <div><img src="image.png" /></div> 
         <br class="clearfloat" />        

         <br /><div class="line"></div><br />

     etc..........

   </div>
   <br class="clearfloat" />
   <div id="footer">
      ...
   </div>
</div>

和CSS:

.purpleLayout #container { 
 width: 50em; 
 background: #FFFFFF;
 margin: 0 auto;
 border: 0px solid #635e7b;
 text-align: left;
 z-index:0;
 position:relative;
} 

.purpleLayout #sidebar1 {
 float: left; 
 width: 11em;
 background: #c9c5db;
 padding: 1em 0; 
 color:#666666;
}

#sidebar1 .sidetext{
 padding: .4em 1em .2em 1em;
 height:auto;
 width:auto;
}

#sidebar1 .sidelink{
 height:auto;
 width:auto;
 cursor:pointer;
}


.purpleLayout #mainContent {
 margin: 0 1.5em 0 12em;
} 

#mainContent img{
 border: .2em solid #635e7b;
 max-width: 14em;
}

.tabcontent{padding:15px 0;}


.fltrt { 
 float: right;
 margin-left: 8px;
}
.fltlft {
 float: left;
 margin-right: 8px;
 width:21em;
}
.clearfloat {
 clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


.title{font-size:1.05em; font-weight:bold;}

.subtitle{color:#5f5f5f; font-size:.95em;}

.text{margin-left:1em; font-size:.85em;}

.line{margin-left:.1em; width:36em; border-bottom:1px solid #635e7b

所以在这个例子中，第一条水平线(第一段+图像之后的那条)被下推，所以它低于左栏的高度。这意味着段落+图像和行之间有很大的空白。当我拿走 clearfloats 时，右栏中的内容重叠。

关于如何解决这个问题有什么想法吗？

谢谢。

Answer 1

需要将tabcontent向右浮动，所以其明确的行为是不关注侧边栏。我将此添加到您的 CSS:

.tabcontent{ float: right; }

如果它是您的主要内容区域，您可能还想为此元素指定一个明确的宽度。

注意:由于两列都是 float 的，所以如果页面上有任何内容出现在 .mainContent 的末尾，您会希望有一个 clearfloat 元素。