列div浮動問題

我試圖創建一個雙列布局。左欄包含鏈接列表。右列包含主要內容，其中包含帶圖像的段落列表。對於每個項目，該段落應位於圖像的左側。項目由水平線分隔。我的問題是，無論我在哪裏放置一個明確的浮動，都會讓事情變得混亂。段落+圖像項目和線條彼此重疊，或者根據左列的高度將右列內容向下推。這裏就是我：列div浮動問題

<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時，右列中的東西重疊。

有關如何解決此問題的任何想法？

謝謝。

來源

2010-07-31 vee

需要浮動tabcontent的權利，所以其清晰的行爲沒有關注側邊欄。我把這個添加到你的CSS中：

.tabcontent{ float: right; }

你可能想要爲這個項目指定一個明確的寬度，以及它是你的主要內容區域。

注意：因爲兩列都是浮動的，所以如果在頁面之後有任何東西出現，那麼你會希望在.mainContent結尾處有一個clearfloat項目。

來源

2010-07-31 15:25:30 babtek

工作，謝謝！ – vee 2010-08-01 22:06:00

根據我的經驗，使用display: inline-block可以更好地解決這個問題，而不是浮動的東西。不管是那個，還是咬下子彈，然後使用（gasp！）表格。

來源

2010-07-31 14:17:14 tdammers

列div浮動問題

回答

相關問題