Question

我想要一个基本的全宽度布局，右侧有一个250px的侧边栏。这大致是我想要的：

<-------Content-------><--250px sidebar-->
<---------------100% width--------------->

这可能没有Javascript或表吗？

Answer 1

<div style="float: left">
  ..... content ......
<div>
<div style="float: right; width: 250px;">
 ..... sidebar .....
</div>
<div class="clear"></div>
... other content

这是class =“clear”的CSS：

div.clear {
    clear:both;
}

当您看到有多少空间时，可以设置第一个div宽度。

这有用吗？

Answer 2

是的，当然：

请参阅http://jsfiddle.net/whTwg/4/

HTML：

<div id="wrapper">
    <div id="sidebar-wrapper">
        <div id="sidebar">Sidebar</div>
    </div>
    <div id="main-wrapper">
        <div id="main">Main</div>
    </div>
</div>

CSS：

#wrapper{
    overflow:hidden;
}
#main-wrapper{
    overflow:hidden;
}
#sidebar-wrapper{
    float:right;
    width:250px;
    max-width:50%;/* You should set a max-width */
}
/*Here you can add borders, paddings and margins */
#main{
    background:#aaf;
    border:10px solid blue;
}
#sidebar{
    background:#faa;
    border:10px solid red;
}

注意：您可以在#wrapper{overflow:hidden}之后添加<div style="clear:both"></div>，而不是main-wrapper（或不同于可见的内容）。

修改：

你是对的，我忘记添加#main-wrapper{overflow:hidden;}。我修复了链接和代码。

如何在不使用Javascript的情况下实现此布局？

2 个答案: