兩個div內聯，動態尺寸

我想看起來像一個典型的論壇帖子，其中一些用戶信息是在帖子的左側，然後是帖子本身。我用兩個div圍繞另一個div，然後在css上使用float。我的問題是，另一個div在浮動時也想留在左邊，而不是在另一個div旁邊。我已經嘗試了display:inline;在div上，並且將它改爲span。最接近的事情是隻有其他div的頂部在正確的位置（當我不浮動這個div，只有第一個）。想一個典型的IPB郵政佈局。如果沒有意義，這裏是我的代碼：兩個div內聯，動態尺寸

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<div id = "contentarea"> 
    <div class = "post"> 
     <div class = "head"> 
      <p class = "name">asrockw7</p> 
     </div> 
     <div class = "body"> 
      <p class = "title">On the Origin of Species</p> 
      <p class = "content">Integer hendrerit lectus sit amet turpis facilisis quis lacinia nulla tempus. Aliquam vitae ante eu sem vestibulum scelerisque. Cras dui neque, auctor eget rhoncus non, pretium a justo. </p> 
     </div> 
     <div class = "clear">clear:both;</div> 
     <div class = "allreplies"> 
      <div class = "reply"> 
       <p class = "name">Wafer</p> 
       <p class = "content">Vestibulum nec turpis eu mi imperdiet porttitor. Fusce eget lorem libero, a imperdiet sem. Integer eleifend tincidunt condimentum. Nam id arcu nec lectus rhoncus sagittis.</p> 
      </div> 
      <div class = "reply"> 
       <p class = "name">Arondight</p> 
       <p class = "content">Suspendisse non eros orci, a porttitor lacus. Donec vulputate viverra neque, quis sagittis eros suscipit vel.</p> 
      </div> 
     </div> 
     <div class = "clear">clear:both;</div> 
    </div> 
</div> 
</html> 

<style type = "text/css"> 
.clear { 
background:white; 
clear:both; 
} 
#contentarea { 
margin-top:50px; 
margin-left:10px; 
min-width:700px; 
} 
p{ 
font-family:"Lucida Console"; 
} 
.post { 
opacity:0.9; 
background:blue; 
padding:5px 10px 5px 10px; 
} 
.post .head { 
background:red; 
float:left; 
} 
.post .body { 
background:green; 
} 

.post .allreplies { 
background:yellow; 
} 
</style>

顏色只是爲了能夠區分每個部分。我想這是因爲body div不認爲它會適合div的head，所以它下降。我可以指定一個明確的寬度和高度，並使body div知道它可以適合，但這對於具有大分辨率顯示器的人來說會很糟糕。此時，我只是想用<table>。

這些都是由PHP生成的，只是希望首先得到佈局。

TL;博士：基本上我想要的head股利和股利body是緊挨彼此，而不是body，因爲它不認爲它適合DIV脫落。

來源

2012-08-12 lightburst

甚至更好的解決方案是所謂的_Block格式化上下文_：http://stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width – lightburst 2012-08-15 12:13:52

您可以將x%寬度添加到.head和(100-x)%寬度到.body。此外，您可以像以前一樣將float:left添加到.body。 See fiddle.

你現在的方式，.head元素佔據左上角的空間，推動.body（這是不浮動）的內容向右。

當您不指定浮動div的寬度時，.body div的寬度是the width of the content inside the div和the width of the parent中的最小值。在這種情況下，內容的「寬度」大於父元素的寬度，所以.body div被推到它自己的水平線上。如果在.head和.body上只有float:left，如果.content中沒有太多文字，它就會正常工作。

來源

2012-08-12 08:51:50 irrelephant

哇！棒極了。非常感謝。 – lightburst 2012-08-12 09:04:44

兩個div內聯，動態尺寸

回答

相關問題