製作CSS的float列在頂部

http://jsfiddle.net/y88mq/1/製作CSS的float列在頂部

對準我有一個簡單的佈局與三個容器：一，二，三。我試圖讓三個頂部與一個對齊。現在一個和兩個向左漂移，三個向右漂移。我嘗試了結算的組合，但它似乎沒有工作。我希望得到這個只與CSS一起工作。

<div class="left">one</div> 
<div class="left">two</div> 
<div class="right">three</div> 

.left { 
    background: red; 
    width: 66%; 
    height: 200px; 
    margin-bottom: 10px; 
    float: left; 
} 

.right { 
    background: green; 
    width: 33%; 
    float: right; 
    height: 200px; 
}

編輯：我想同

來源

2013-03-17 Brandon

如果你必須保持HTML的順序相同，則所有我能想到的是使用：

position: absolute;

我所做的更改您的小提琴： http://jsfiddle.net/hRdEf/

希望有所幫助。

來源

2013-03-17 18:31:57 Martyn0627

保持源順序由於CSS和它的邪惡花車的性質，我建議你重新排列盒的順序。這將很好地工作：

<div class="left">one</div> 
<div class="right">three</div> 
<div class="left">two</div>

參見：http://jsfiddle.net/y88mq/2/

來源

2013-03-17 18:12:34 Anonymous

只需將「正確格」在上市的div的頂部。

<div class="right">three</div>  
<div class="left">one</div> 
<div class="left">two</div> 

..//rest of code

http://jsfiddle.net/y88mq/7/

來源

2013-03-17 18:15:47 Red2678

<div class="left">one</div> 
<div class="left">two</div> 
<div class="right">three</div> 

.left { 
    background: red; 
    width: 32%; 
    height: 200px; 
    margin-right: 20px; 
    float: left; 
} 

.right { 
    background: green; 
    width: 33%; 
    float: right; 
    height: 200px; 
}

來源

2013-03-17 18:31:59

如果將第一列和第二列包裝在div中，可以將包裝div和第三列並排放置並排列在頂部。包裝div將保存第一和第二列堆疊。

這種方法的額外優勢是，如果有更多可用空間，您可以在一行上選擇對齊第一列和第二列。

從語義上講，你的列將仍然是相同的順序。

來源

2014-01-04 17:51:35 babsgosgens

製作CSS的float列在頂部

回答

相關問題