CSS div定位（原始狀態）

我試圖做一個基本的系統，但stying必須用div來完成。CSS div定位（原始狀態）

事情是，當我自己做這件事時，我總是搞亂我的div風格。就像一個div離開容器div和類似的東西。

我想要實現的是非常基本的。

應該有一個800x800的容器div。
第一個200px高度和600px寬度應包含一個名爲描述的新div。
右側的200px寬度應該是一個新的名爲logo的div。
這裏應該有另一個div，200px高度和800px寬度。
在底部，我們得到了400px的高度和800px的寬度。我想使它像這樣：（全部400px）的高度。

從左到右;

100px - 一個名爲塊的塊（包含塊圖像）150px - 一個名爲item-1的div。 100px - 一個名爲block的塊（包含一個塊圖像）150px - 一個名爲item-2的div。 100px - 一個名爲塊的塊（包含塊圖像）150px - 一個名爲item-3的div。 100px - 一個名爲塊的塊（包含塊圖像）

有沒有人可以幫助我在這種情況下？一個小例子會讓我走。

謝謝。

來源

2012-11-05 Aristona

這看起來不像一個問題，這看起來像任務。這很簡單，但我不想解決它而不是你（我確信，我不是那種有這種想法的人）。 –

一張圖片勝過千言萬語。 –

@Diodeus;爲了讓你相當容易，想象一個像正方形的div。然後想象那個div中有2個正方形，寬度和高度都是％50。（作爲一個孩子） – Aristona

以下代碼應該對您有所幫助。您的總寬度超出了800像素，因此我將寬度增加到了850像素。

<body> 
<div style="width:850px; margin:0 auto;"> 
    <div style="height:400px; width:100px; float:left" name="block"></div> 
    <div style="height:400px; width:150px; float:left" name="item-1"></div> 
    <div style="height:400px; width:100px; float:left" name="block"></div> 
    <div style="height:400px; width:150px; float:left" name="item-2"></div> 
    <div style="height:400px; width:100px; float:left" name="block"></div> 
    <div style="height:400px; width:150px; float:left" name="item-3"></div> 
    <div style="height:400px; width:100px; float:left" name="block"></div> 
    <div style="clear:both"></div> 
</div> 
</body>

來源

2012-11-05 19:59:38 Gaurav

明確的目的是什麼：兩者; ？ – VIDesignz

@VIDesignz - 將浮動元素從正常的文檔流中移除，這會導致父元素摺疊。 'clear：both'強制兄弟元素將自己放置在浮動元素之後，這又擴展了父元素。（具體細節可以在我的答案中的CSS-Tricks鏈接中找到。） – Shauna

@Shauna謝謝！這非常有意義......非常有用！ – VIDesignz

-1

首先，這裏的大多數人都不願意被要求爲你做你的工作，這基本上是你在這裏問的。如果你想嘗試你想要做的事，那麼你會好得多，然後帶着特定的問題回到這裏。

這就是說，我會試着幫助你解決問題之下的問題，因爲你的帖子中有這些註釋。

這聽起來像你沒有很好的理解浮動，以及它們如何影響HTML元素（及其父元素）。 CSS-Tricks has a phenomenal article on floats。簡而言之，將float應用於元素會將其從HTML文檔的正常流程中取出，並允許您將塊級元素相鄰排列。當容器的所有子元素都是float ed時，會出現問題，這會使父容器自身崩潰。當一個子元素是float ed時，也可能發生這種摺疊效果，但是另一個元素不是，並且非float ed元素佔用的垂直空間比float小。在這種情況下，父母「崩潰」到較小的子女元素，留下較大的浮動子女溢出父母。一旦你瞭解了漂浮物（和漂浮清理）的工作方式，你的生活將變得更加簡單。

此外，你可能還想看看display: inline-block;，它可以解決一些像水平導航等問題。

編輯從鏈接網站的外觀來看，您的另一個問題是您正在嘗試修復容器元素的高度，然後使子元素的總高度加起來超過父元素。爲此，I refer you back to CSS-Tricks，瞭解關於CSS盒子模型的信息。總之，如果你有一個2英尺高的盒子，並且在它裏面你堆疊兩個盒子，一個是1英尺高，另一個是1.5英尺高，那麼盒子裏面的盒子就會伸出來因爲它們的高度加起來比容器的高度還要多。相同的概念適用於網頁設計，特別是當您使用固定大小時。

來源

2012-11-05 20:01:55 Shauna

@AnılÜnal - 我看到你的問題和你的意見的問題是，你似乎沒有牢固掌握網頁設計/開發的基礎知識。你最好的選擇是研究我上面鏈接的概念，以便你知道你爲什麼會遇到溢出問題。 – Shauna

CSS div定位（原始狀態）

回答

相關問題