在同一行中制作兩個div？

Question

如何在網站上的同一“行”中對齊兩個div ？

我一直在這個頁面上工作，我試圖獲得一個漂浮在網站左側的菜單，然后將內容放到一邊。

我試過用它作為div的CSS：

.menu
{
    width:25%;
    height:auto;
    margin-bottom:2px;
    float:right;
    position:fixed;

}
.content
{
    width:70%;
    height:50%;
    margin-bottom:2px;
    padding: 25px;
    float:right;
}

頁面並沒有並排顯示並浮動，而是大多數網站如： http ： //www.exorithm.com/ ，他們有側邊欄和內容區域。 有人可以幫忙嗎？

我的所有代碼： http ： //pastebin.com/KqYkrweE

Answer 1

我認為問題在於你有位置：固定在菜單上。 如果使用position fixed或absolute，則會從文檔流中刪除元素，因此float：right變得無關緊要。

編輯：這是實現相同結果的更好示例

另外請記住，您使用百分比表示寬度，然后應用基於像素的填充。 這可能導致元素對於頁面變得太寬並且一個在另一個下面顯示。

70% + 25% = 95% with 5% left over.

如果5％小於50px（使整個寬度為1000px），那么您的列總數將大於整個寬度。 更好的方法是使用基於百分比的填充（不是100％確定其工作原理）或將填充，邊距和邊框應用於浮動列內的元素，如下所示：

// CSS
.leftCol {
    float:left;
    width:25%;
}

.rightCol {
    float:left;
    width:75%;
}

.content {
    padding:25px;
}

// Markup
<div class="leftCol">
    <div class="menu">
        Here is my menu
    </div>
</div>
<div class="rightCol">
    <div class="content">
        Here is my content
    </div>
</div>

編輯2：如果您希望菜單在用戶向下滾動時保持在屏幕上，則position：fixed將完成工作。 我查看了你的頁面，看起來你有一個206px的固定寬度導航。 因此，現有標記的樣式會更好，例如：

// CSS
.menu {
    position:fixed;
    left:0;
    top:0;
    width:206px;
}

.content {
    padding: 25px 25px 25px 231px;
}

Answer 2

1. 你是向左而不是向右浮動。
2. 你的.content每側有25px的填充，這意味着整體50px。 由於您的menu是25％， content 70％，如果您的容器小於1000px，則空間不足。