Div定位問題

現在開始做我的頭，我有一個名爲frontwidth的div id css，其中包含1 img 1標題和1個文本。Div定位問題

當我做第二或第三frontwidth其鋪設自己身後，而不是去下，背面..

幫助:-(提前http://www.e-fluential.com/offline/

感謝

來源

2011-03-21 Lee

id是唯一的。如果您想要以相同方式設計多個項目，請使用課程。 – 2011-03-21 13:26:48

當你問這樣的問題時，你應該添加一個代碼示例。 – 2011-03-21 13:27:20

@MikeEast - 他有一個，看到帖子中的網址。 – 2011-03-21 13:28:13

按我的評論：

哇，這是..一個獨特的方法？你有太多的position: absolute 和position: relative。我只是修復了這個在Firebug中的，但它要去需要幾分鐘的時間寫一個答案，規則的數量我不得不切換並添加。

從這些元素中取出position規則：

#mainbody。
#frontwidth。
#titlesbig。
#greyline。
#homepageimage。
#titlesmedium。
#homepagetext。
希望我沒有忘記任何：d

隨着mainbody例外，你使用其中每一元素多次。因此，改用class代替。

例如，在你的HTML，更改爲：

<div class="frontwidth">

而在你的CSS，更改爲：

.frontwidth { 

}

現在我們可以爲你希望他們奠定了這些元素：

對.homepageimage，加float: left。
On .frontwidth，add overflow: hidden（to clear the floats）。
On .titlesmedium and .homepagetext add margin-left: 340px。

來源

2011-03-21 13:37:10 thirtydot

Spot on perfect ....我永遠無法讓我的頭圓圓的div ... – Lee 2011-03-21 13:45:16

問題在於您的使用情況的位置：絕對位置和相對位置：

如果從css中刪除這些文件，則不再堆疊在彼此之上嘗試刪除這些文件，然後調整t他html

來源

2011-03-21 13:28:49 JesperGJensen

是最好把它們放在左邊，然後右邊：然後呢？ – Lee 2011-03-21 13:31:05

如何讓Blah Blah坐在圖片旁邊，而不使用絕對？ – Lee 2011-03-21 13:33:31

如果從homepageimage，titlesmedium和homepagetext類中刪除position: absolute，大部分佈局會自行排列。各種position: relative元素不會造成問題，因爲它們沒有任何對頂部，底部，左側或右側的引用 - 實質上，它們根本不會改變佈局。

要使一個元素相鄰，可以使用float。例如，將圖像浮起，然後將標題左移。這會將標題放置在圖像旁邊。之後，一定要使用clear來再次正常啓動流動元素。另外，擺脫所有額外的div - 你通過增加許多額外的元素來改變佈局。爲了包裝和設計內聯元素，請考慮使用<span>標記。

來源

2011-03-21 13:37:03

您已將frontwidth divs中的所有內容定位在絕對位置。絕對定位將元素排除在流程之外，並將所有其他元素定位，就好像它們不在那裏一樣。

最好的解決方案是不使用position: absolute（這是通常使用的「最後的手段」）。而是將圖像左移，併爲標題和文本留出左邊距。

一些更多的建議：

很多圖片的缺乏alt屬性。
你的源代碼是一個大div湯。「無表格佈局」並不意味着「僅使用div」。不要把東西包裝在div中。例如，不需要將每個圖像包裝在一個div中。您可以將樣式直接應用於圖像。並使用有意義的元素，如h1,h2等用於標題，p用於文本段落，ul和li用於列表（menues）等。div也是「最後的手段」。只有在沒有其他HTML元素適合的情況下才使用它們。

來源

2011-03-21 13:37:52 RoToRa

在普通div中包裝圖像不僅增加了不必要的結構到頁面，它改變了佈局。一個圖像是一個內聯元素，但將其包裝在一個div中，現在它們都像塊元素一樣。 – 2011-03-21 13:40:00

+1，對於賢者的建議。 – thirtydot 2011-03-21 13:45:10

@thritydot：如果給它的人不知道「聖人」是什麼意思，建議可以是聖人嗎？ – RoToRa 2011-03-21 14:29:34

Div定位問題

回答

相關問題