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

因此，在此示例中，第一个水平线（第一个段落+图像之后的一个）被向下推，因此它低于左列的高度。这意味着段落+图像和线之间有一个很大的空白区域。当我拿走clearfloats时，右栏中的东西重叠。

有关如何解决此问题的任何想法？

感谢。

Answer 1

根据我的经验，使用display: inline-block而不是浮动内容可以更好地解决这个问题。要么是这样，要么咬紧牙关并使用（喘气！）表。

Answer 2

需要将tabcontent正确浮动，因此其明确的行为并未注意侧边栏。我把它添加到你的CSS：

.tabcontent{ float: right; }

如果它是您的主要内容区域，您可能还想为此项目指定显式宽度。

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

列div浮动问题

2 个答案: