右塊浮在底部

我一個完整的新手和下頁的工作：http://mockingbirdagency.com/thebox/tvshow.html 右塊浮在底部

拉右容器（控股與浮動右邊的塊：右）浮在底部，我有給它這個：

#pull-right-tv { 
    float: right; 
    margin-top: -1362px; 
    width: 330px; 
}

所以它會開始在頁面的頂部。現在每一次，我都會修改一些東西，這些塊會四處移動，這對屁股來說是一種痛苦。任何方式在這個？我做錯了什麼？

來源

2012-12-20 blabldfseges

調整你的CSS一點：

#pull-right-tv { 
    margin-top: -1362px; /* Delete this */ 
} 

#pull-left { 
    float: left;   /* Add this */ 
    width: 600px;   /* Change this from 960 to 600 
          so it won't push the other column out of the way */ 
} 

#content { 
    overflow: auto;  /* Add this so the parent retains its height 
          when its children are floating */ 
}

來源

2012-12-20 00:34:01 Blender

感謝您的支持！ – blabldfseges

我想要做的事情是把左欄放在一個div中，就像你在右欄中做的一樣，然後在左欄中放置一個float：left，而不是右欄中的float。漂浮在右邊的東西一直很容易出錯，對我來說至少是這樣。

另外，我會非常小心地使用像現在這樣做的負邊距，正如您所說的那樣在@ $$中感到痛苦。

來源

2012-12-20 00:33:42

幾個問題會在這裏..

線165 - 缺少最後的「S」階級「」
設置拉寬-剩下。
將拉右改爲'float：left'。雖然你可以在這裏漂浮在右邊，但我發現學習將元素向相同的方向漂浮更好。當您開始開發響應式佈局（您現在應該開始學習！）時，這將非常方便。
將適當的空白邊設置到您的右拉式容器。

這解決您的問題：

.pull-left { 
    float: left; 
    width: 610px; 
} 

#pull-right-tv { 
    float: left; 
    margin-left: 20px; 
    width: 330px; 
}

而且，總是試圖在你的命名約定使用的一致性。例如，這些是您的主要內容容器，因此我會使用#content & #sidebar這樣的代碼，以便在重新進入代碼時輕鬆識別。

最後提及使用ID或CLASS ...一個簡單的經驗法則是使用ID來使用任何將被使用的任何東西，比如上面的2個選擇器。所有其他在頁面中多次獲取引用的應該使用CLASS選擇器。

來源

2012-12-20 00:49:05

是的，我被告知使用身份證大概10個小時進行開發，所以我正在放慢他們大部分的轉化爲課程。（這實際上是一箇舊版本的設計，因此從那時起它已經進行了很多調整）。感謝您的回答。 – blabldfseges

右塊浮在底部

回答

相關問題