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

页脚似乎很好地工作。

答

你可以通过设置％宽度和浮动左侧边栏中...留下两个

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

我认为这已经成功了，我禁用了我的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;是不是在为你工作？

这是让他们并排，只有侧边栏浮动。然而，表单框在它的下面，加上我不得不通过'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和流体网格选项。然后，不用担心浮动，重叠或包装。它只是为你完成的。那么你可以花费开发时间在真正重要的东西上。

CSS：不能让边栏工作正常

相关推荐