CSS：不能讓邊欄工作正常

我想獲得邊欄工作。但是它不會讓#main部分沿着側邊欄走。取而代之，你會看到側欄，然後是主頁（下面）。 :(CSS：不能讓邊欄工作正常

而且，如果你能得到一個解決方案，可以邊欄/ maynot存在，主要將填補空間，這將是巨大的。

下面是什麼，我試圖讓。

CSS Desired layout

下面是一些相關的CSS

#main 
{ 
    margin: 0 0 0 100px; /* This is my way of indenting it over the sidebar (not dynamic to no sidebar being present*/ 
    padding: 15px 15px 15px 15px; 
    background-color: #fff; 
    border-radius: 4px 0 0 0; 
    -webkit-border-radius: 4px 0 0 0; 
    -moz-border-radius: 4px 0 0 0; 
} 

ul#sidebar 
{ 
    width: auto; 
    /* float:left; */ 
    font-size: 95%; 
    word-spacing: -0.1em; 
    padding:10px 10px 10px 1px; 
}

頁腳似乎很好地工作。

來源

2011-12-21 Doomsknight

你可以通過設置％寬度和浮動左側邊欄中...留下兩個

<div class="wrapper"> 
    <div class="sidebar">Sidebar</div> 
    <div class="main">Main</div> 
</div> 

.wrapper {width:100%; overflow:hidden;} 
.sidebar {width:8%; float:left; margin-right:2%;} 
.main {width:90%; float:left;}

來源

2011-12-21 16:41:07 Liam

我認爲這已經成功了，我禁用了我的CSS來查看CSS中的純效果，可以一點一點地重新整合。 – Doomsknight 2011-12-21 16:50:44

將您的代碼發佈到jsfiddle.net上如果它更容易... – Liam 2011-12-21 17:00:32

你不需要在main上有一個margin，你只需要將main浮動到右邊，或者將navbar浮動到左邊。我注意到你有一個float：left註釋了ul;是不是在爲你工作？

來源

2011-12-21 16:33:17

這是讓他們並排，只有側邊欄浮動。然而，表單框在它的下面，加上我不得不通過'padding：50px 20px 10px 1px;只是爲了讓它遠距離接近。至少可以說，這看起來很俗氣。編輯。哦，並且正好浮在主體上，就把它放在頁腳的下面。 :( – Doomsknight 2011-12-21 16:37:57

啊，不要忘了清除浮動後的浮動，有很多種方法可以做到這一點，但我經常只是把'

'放在水平排列的一組事物之後，清晰的類是這樣的： 'div.clear {clear：both}' – 2011-12-21 16:48:40

浮動是我常用的方法。但是，您需要記住在兩個浮動元素之後清除浮動元素，否則會像在頁腳中提到的那樣重疊。我通常通過定義clear:both做一個空格來處理這個問題。我不能說Grids足夠多。有標準的960和流體網格選項。然後，不用擔心浮動，重疊或包裝。它只是爲你完成的。那麼你可以花費開發時間在真正重要的東西上。

來源

2011-12-21 16:45:18 bpeterson76

CSS：不能讓邊欄工作正常

回答

相關問題