我如何創建一個兩列DIV佈局，其中每列可以具有可變寬度

我認爲最好的辦法是向我們展示了一個example：我如何創建一個兩列DIV佈局，其中每列可以具有可變寬度

我想有一個div與用戶/日期的信息，文本的另一個div（如果它比div寬度更長，則應該換行），另一個div使用鏈接。

你怎麼看，第一行沒有問題（它是正確的）。第二個，把div當作「塊」...似乎浮動被忽略。

有幫助嗎？

EDIT

服用jsfiddler作爲例子，輸出應該是這樣的一個出頭：

04-03-2011 - userA - Hello My name is John and I really like this website        X 
02-04-2010 - userA-RealGoodUser - This text should be at the right of the userA-RealGoodUser, but  X 
            in fact it doesnt. Why this behaviour?

來源

2011-05-24 markzzz

新行上的文本是否要在用戶/日期之下？或者與第一行的開頭內聯？ – Matt 2011-05-24 12:35:20

另外一個例子，也許它會更清楚:) – markzzz 2011-05-24 12:43:07

如果你要設置'wallMess'的寬度，你會得到你想要的包裝 – Brett 2011-05-24 12:48:51

更新代碼以及

.wallArea { 
    width: 700px; 
    float: left; 
    margin-left: 5px; 
    color: #000000; 
    float: left; 
} 

.wallArea1 { 
    width: 670px; 
    float: left; 
    color: #000000; 
    float: left; 
    padding-right: 10px; 
} 

.wallArea2 { 
    width: 20px; 
    float: left; 
    color: #000000; 
    float: left; 
    padding-top: 2px; 
} 

.wallUser { 
    width: auto; 
    float: left; 
    font-family: comic sans ms; 
    font-style: oblique; 
    color: #000000; 
    font-size: 11px; 
    font-weight: bold; 
} 

.wallMess { 
    width: auto; 
    overflow: hidden; 
    font-family: comic sans ms; 
    color: #000000; 
    font-size: 12px; 
    font-weight: normal; 
}

更新基於例如

看到它here。我基本上允許兩列（用戶和混亂區域）自動大小。這應該是你正在尋找的。

來源

2011-05-24 12:34:08 SwDevMan81

Uhm yes，但是我需要一種動態寬度，這就是爲什麼我把寬度：汽車在walluser和wallMess .... – markzzz 2011-05-24 12:35:14

這只是使div的寬度包含文本自動。包含這些div的框的大小不是自動的，並且需要足夠寬以處理文本，否則將包裝 – SwDevMan81 2011-05-24 12:38:51

如果您希望它適合並且是動態的，請將'wallArea1'寬度更改爲'auto' – SwDevMan81 2011-05-24 12:40:12

你的內含div wallArea1比含量小，wallUser和wallMess因此wallMess得到推到下一行。如果增加寬度wallArea1及其包含div wallArea這不會發生。

來源

2011-05-24 12:32:53 Brett

我如何創建一個兩列DIV佈局，其中每列可以具有可變寬度

回答

相關問題