我想要一个基本的全宽布局,右侧有一个 250 像素的侧边栏。这大致是我想要的:
<-------Content-------><--250px sidebar-->
<---------------100% width--------------->
如果没有 Javascript 或表格,这可能吗?
我想要一个基本的全宽布局,右侧有一个 250 像素的侧边栏。这大致是我想要的:
<-------Content-------><--250px sidebar-->
<---------------100% width--------------->
如果没有 Javascript 或表格,这可能吗?
<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 的宽度。
这有帮助吗?
是的当然:
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;}
。我已经修复了链接和代码。