DIV佈局

我想達到以下佈局： enter image description here DIV佈局

與下面的代碼：

<div class="m"> 
    <div class="l"></div> 
    <div class="r"> 
     <div class="r1"></div> 
     <div class="r2"></div> 
    </div> 
</div>

我的CSS是這樣的：

div.m{ 
    ... 
    width: 100%; 
} 
div.m div.l{ 
    float: left; 
    ... 
} 
div.m div.r{ 
    float: right; 
    ... 
} 
div.mainMenu div.r1{ 
    position: relative; 
    right: 0px; 
    ... 
} 
div.mainMenu div.r2{ 
    position: relative; 
    right: 65px; 
    ... 
}

其結果：

enter image description here

我在做什麼錯？任何幫助，將不勝感激。

來源

2012-02-26 LihO

你試過'頂：0'上** ** R2？ – 2012-02-26 13:49:56

@ lorenzo-s：是的，我有。同樣的結果。 – LihO 2012-02-26 13:51:01

好吧，所以請嘗試在** r **上使用'position：relative'，並在** r1 **和** r2 **上改爲'position：absolute'，並在兩者上留下'top：0'。 – 2012-02-26 13:53:22

嘗試在[R使用position: relative和改變的位置是：絕對的R1和R2，留下兩個top: 0。

巴小心，這樣的內容[R將延長下面R1和R2。如果這是一個問題，爲了避免這種情況，請使用rpadding-right。

來源

2012-02-26 13:58:22

謝謝，這完美地解決了我的問題。不，div'r'不會有除這些div之外的其他內容。 – LihO 2012-02-26 14:01:54

這是否適合您？

http://jsfiddle.net/xn8Ks/

來源

2012-02-26 13:54:26

您必須設置position:absolute; top:0px; R1和R2。 http://jsfiddle.net/Zdkdp/2/

div{ 
    height:100px; 
} 
div.m{ 
    border:1px solid black; 
    width: 100%; 
} 
div.r{ 
    position:relative; 
    border:1px solid blue; 
    width:33%; 
} 
div.r1, div.r2{ 
    border:1px solid red; 
} 
div.l{ 
    float: left; 
    border:1px solid green; 
    width:33%; 
} 
div.r{ 
    float: right; 
} 
div.r2{ 
    position:absolute; 
    right:65px; 
    top:0px; 
} 
div.r1{ 
    position:absolute; 
    width:60px; 
    right:0px; 
    top:0px; 

}

來源

2012-02-26 13:54:33 Alex

實際上這使得'r1'和'r2'根據屏幕而不是'r' div來定位。'r' div必須有'位置：相對'，就像洛倫索寫的。 – LihO 2012-02-26 13:58:05

謝謝！編輯。 – Alex 2012-02-26 14:00:44

你沒有做錯什麼，並.r2的位置是可以預期的。您需要爲.r2設置負值最高值。負的最高值等於.r1的高度。所以如果.r1 { height: 50px;}然後.r2 { top: -50px; }。另一個選擇是浮動.r1和.r2而不是定位它們。

來源

2012-02-26 13:55:10

根據您的原始代碼，我製作了this jsfiddle，可以實現您繪製的佈局。

當然，該小提琴中的邊框和顏色僅用於演示目的。

生成的HTML：

<div class="m"> 
    <div class="l">Left</div> 
    <div class="r">Right 
     <div class="r1">R1</div> 
     <div class="r2">R2</div> 
    </div> 
    <div class="clearfix"></div> 
</div>

的clearfix DIV是有那麼你就不必給出具體的高度，以它上面的事，確保m具有正確的高度不管。

而CSS：

div.m { 
    border: 2px solid gray; 
    width: 100%; 
} 
div.m div.l{ 
    border: 2px solid green; 
    float: left; 
} 
div.m div.r { 
    border: 2px solid blue; 
    float: right; 
    display: inline-block; 
} 
div.r1, div.r2 { 
    border: 2px solid red; 
    display: inline-block; 
} 
div.clearfix { 
    clear: both; 
}

來源

2012-02-26 13:58:40 Jeroen

回答

相關問題