靜態元素：絕對

我有以下標記：靜態元素：絕對

<html> 
<body style="margin:0;padding:0"> 
    <div> 
     <div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div> 
     <div style="border:3px solid blue; width:25%; position: absolute; left:72.5%">Right</div> 
     <div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div> 
    </div> 
</body> 
</html>

我想在這裏實現爲三米的div這樣奠定了：

+---------------------------+--------+ 
|Left      |Right | 
+---------------------------+--------+ 
|Bottom        | 
+------------------------------------+

然而，我的標記的「底部」div與「左」&「底部」重疊。

我應該如何設計這3個元素來達到這個效果？

請注意，「底部」不是頁面上的最後一個元素。我只是簡單地將「左」和「右」放在一行中，頁面流從下面的行繼續進行默認定位。

編輯：除了公認的答案...如果你沒有靜態的高度或出於某種原因不想硬編碼，也可以達到類似的效果：

<div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div> 
<div style="border:3px solid blue; width:25%; margin-left:72.5%">Right</div> 
<div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div>

來源

2011-07-05 Konrad Garus

「底部」div與「左」和「底」部分重疊。 ......'底部'div與自身**重疊？ –

我認爲問題在於，當您將元素置於絕對位置時，它們會從文檔流中移出。所以後面的元素看不到它們，假設它們不在那裏，然後跳起來。爲了讓你的「底部」div位於你的「左」/「右」分區，你必須給它一個等於它們的高度（或類似的東西）的margin-top。

來源

2011-07-05 20:14:56 sdleihssirhc

不知道爲什麼您使用的位置是：絕對

如果你需要給出的佈局，你可以試試這個？

<div style="clear:both;"> 
     <div> 
      <div style="border:3px solid red;width:70%;float:left;padding:3px">Left</div> 
      <div style="border:3px solid blue;width:25%;float:left;padding:3px">Right</div> 
     </div> 
     <div style="clear:both;border:3px solid black;width:96%;padding:3px">Bottom</div>  
    </div>

可能難以用寬度控制％。

你可以試試這個嗎？您可以根據需要調整寬度。

通常情況下，我將它保存在我的母版頁中。這樣所有的孩子網頁都很好。

<div style="clear:both;width:532px"> 
     <div> 
      <div style="border:3px solid red;width:350px;float:left;padding:5px">Left</div> 
      <div style="border:3px solid blue;width:150px;float:left;padding:5px">Right</div> 
     </div> 
     <div style="clear:both;border:3px solid black;width:516px;padding:5px">Bottom</div>  
    </div>

來源

2011-07-05 20:41:17 kheya

這將是一個哲學的咆哮。其他答案提供了具體的解決方法，這一個看大圖。我最近在這個問題和類似問題上一直在問自己「爲什麼」。

CSS is Cascading Style Sheets。它被設計來做造型。它也做了一些佈局，almost。

其他方法給出了兩種達到預期效果的方法。

隨着位置：（使用position:absolute內position: relativesee also this technique）有可能有「左」的絕對答案的div固定的寬度和「右」的div佔用寬度的其餘部分（或使用百分比都如果你喜歡）通過給予寬度並留在兩個div上。但是，由於絕對div在頁面流之外，因此底部div不能正常流動。如果內容的高度是固定的，您可以提供一個固定的高度。如果沒有，你運氣不好，必須嘗試不同的技術。

與Projapati的float + margin技術的流程很好 - 但有一個2像素固定寬度的像素和另一個佔用容器寬度的其餘部分是不可能的 - 你可以指定百分比或寬度以div爲單位，但沒有辦法告訴div要佔用「其餘部分」。另外，如果您將頁面設置得非常窄，則「Right」div會落到下一行，表示這些div只是暫時彼此相鄰。

總之，這兩種方法都是複雜的黑客攻擊，其目的不是爲了這項任務而設計的，而且都做了人們想要做的有限子集。這裏有很多的問題，在計算器上（如this one）是問類似的細節，都在tar pit陷入試圖微調特定CSS技術，以逼近理想的佈局，並沿着「爲什麼的線，所以很多答案做那個？「，」不要用那種技術，它不會做你想做的事「和」你不能正確理解CSS「。

事情是，你不想要float: left。你不想要position: absolute。這些是最終的可能方法，這是任何人都可以簡單描繪和理解的簡單佈局，並且難以理解CSS爲什麼處理不好。 CSS之間和人們期望它做什麼之間存在基本的不匹配。誠然，當人們開始使用CSS時，他們確實不瞭解CSS。但CSS是爲我們的利益而建立的，它使我們失敗了。錯誤在CSS中，而不在其用戶中。

所需的佈局看起來像一個電網。兩列，兩排。高度擴大以填充內容。「左」位於第一行和第一列，寬度可以是總寬度的百分比或固定寬度，「右」是第一行和第二列，佔用寬度的其餘部分。「底部」是跨越兩列的第二行內容。或者「底部」完全在網格之外，就在頁面之後。

CSS中需要網格佈局as proposed here，因爲它們非常接近人們對頁面佈局的看法，並且覆蓋了現在使用的各種CSS黑客的所有情況。

你可以簡單地指定一個CSS網格：「我想要一個有兩列的網格，左邊佔用100個像素，右邊佔用容器寬度的其餘部分，高度展開以包含內容。頁面的其餘部分在它下面流動。「完成。

如果你想改變這種狀況，以左列佔20％的寬度，或修復右邊欄，而不是，或修復的高度，改變CCS的一條線，你就大功告成了。使用目前的技術，當您達到目前使用的css hack的限制時，您將從頭開始使用不同但具有同等嚴格限制的黑客。恕我直言，CSS網格比大多數人意識到的要大得多，他們會讓所有這些愚蠢的CSS佈局hackery終於消失。

好消息是，這將是doable in IE10和將與它競爭的瀏覽器。壞消息是，你將在很長一段時間內支持IE8和IE9。由我的猜測until at least 2016。

來源

2012-02-15 21:08:52 Anthony

+1這應該是被接受的答案;-)把一個絕對定位的div放入浮動相對定位的div是我需要的。謝謝，託尼。 – Stano

您可以使用Yahoo YUI CSS Grid builder生成這種靈活的柱佈局。

輸出是不是東西，我會想手工代碼，它已經div的嵌套5深，並引用YUI庫CCS精縮時，這是6KB。儘管很容易描述，但我並不滿意這不容易手寫。

下面是生成的html。沒有CSS，這可能沒有多大意義。

<html> 
<head> 
    <title>YUI Base Page</title> 
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
    <style type="text/css"> 
    #custom-doc { width: 100%; min-width: 250px; } 
    </style> 
</head> 
<body class="yui-skin-sam"> 
<div id="custom-doc" class="yui-t1"> 
    <div id="hd" role="banner"><h1>header content</h1></div> 
    <div id="bd" role="main"> 
    <div id="yui-main"> 
    <div class="yui-b"><div class="yui-g"> 
Main content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 
</div> 
    </div> 
    <div class="yui-b">Left bar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> 

    </div> 
    <div id="ft" role="contentinfo"><p>footer content.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div> 
</div> 
</body> 
</html>

這似乎很好地工作在當前的Chrome和Firefox和Internet Explorer 9中注意右邊一列來自左一個在加價前 - float: right上<div id="yui-main">使用。使用:after css規則很有趣，而且可能很重要。

來源

2012-03-22 20:42:48 Anthony

靜態元素：絕對

回答

相關問題