列div浮动问题

Question

我正在尝试创建一个两列布局。左栏包含链接列表。右栏包含主要内容，其中包含带有图像的段落列表。对于每个项目，段落应位于图像的左侧。项目由水平线分隔。我的问题是，无论我将透明浮动放在哪里，都会出现混乱。段落+图像项和行相互重叠，或者右列内容根据左列的高度向下推。这就是我所拥有的：

<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

所以在这个例子中，第一条水平线（第一段+图像之后的水平线）被向下推，因此它低于左列的高度。这意味着段落+图像和行之间有很大的空白。当我拿走清除浮动时，右列中的内容会重叠。

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

谢谢。

Answer 1

需要将选项卡内容向右浮动，因此其明显的行为不会关注侧边栏。我将其添加到您的 CSS 中：

.tabcontent{ float: right; }

如果该项目是您的主要内容区域，您可能还希望为其指定显式宽度。

注意：由于两列都是浮动的，如果页面上有任何内容出现在 .mainContent 的末尾，您可能希望在 .mainContent 末尾有一个clearfloat 项目。

Answer 2

根据我的经验，使用 display: inline-block 而不是浮动的东西可以更好地解决这个问题。要么这样，要么硬着头皮使用（喘气！）表格。