2013-01-10 32 views
0

我有一個DIV浮動問題,如何對齊液浮格

我用的是左浮動兩個div,但是如果2區有大量的文字,它加載DIV之一的,我怎麼能避免這種情況,我想要兩個div加載內聯。我已經使用內聯塊,但沒有工作。

http://jsfiddle.net/pS6Gg/

<div style="width: 100%;overflow:hidden;"> 
<div style="float: left;width:">Left Stuff</div> 
<div style="float: left;margin-left:10px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
<br style="clear: left;" /> 
</div> 

感謝

回答

0

http://jsfiddle.net/pS6Gg/4/http://jsfiddle.net/pS6Gg/5/做到了嗎?

第一種可能性允許圍繞所述第一的第二個div流動,

<div style="float: left; width: 50px;">Left Stuff</div> 
<div style="margin-left:10px;">... text ...</div> 

和第二通過定義第一div的寬度和並給予父創建列效果的div爲孩子填充限定的高度。

<div style="width: 100%;overflow:hidden; height:200px;">    <-- parent height 
<div style="float: left; width: 50px; height:100%;">Left Stuff</div> 
<div style="margin-left:10px; height:100%;"> 
1

您需要設置一個寬度參數都<div>元素。

1

不知怎的,像這樣:

<div style="width: 100%; overflow:hidden;"> 
<div style="float: left;width:20%">Left Stuff</div> 
<div style="float: left;width:80%">Right Stuff</div> 
</div> 

不過,我不會建議使用這種佈局技術,因爲它可以在以後您造成一定的麻煩,當你可能會考慮移植您的網頁,移動或一些微小的,dispaly裝置。

問候。

+0

第一列的寬度是固定的,它取決於 – Ata

1

那麼,你想要發生什麼如果內容太長,無法將DIV顯示在同一行上?您將不得不使用第二行或者截斷顯示的內容。

由於第二行是已經發生的事情,考慮使用內聯元素(如<span>)來實現第二個效果,如果這是更可取的。 Example

0
<div style="width:800px;"> 
    <div style="float: left;">Left Stuff</div> 
    <div style="padding-left:80px;">....</div> 

嘗試通過填充左由80px ...它in.your小提琴作品..試試吧