html - CSS:无法使侧边栏正常工作

我正在尝试使侧边栏工作。但这并不是让#main节沿着侧边栏前进。
取而代之的是，您获得侧边栏，之后是主栏（将其放在下面）。 :(

另外，如果您可以找到一个可能/可能不存在侧边栏的解决方案，并且主栏将填满该空间，那就太好了。

以下是我想要得到的。



这是一些相关的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;
}

页脚工作正常。

最佳答案

您可以使用％设置宽度并向左浮动边栏...

<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;}

关于html - CSS:无法使侧边栏正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8593090/