html - 如何创建带有侧边栏的简单布局

Question

我想在我的页面上创建一个右侧边栏，但是在阅读了多个指南之后，我仍然卡住了。用最少的代码创建侧边栏的最佳方式和对浏览器/移动设备最友好的方式是什么？

HTML

<div class="wrapper">

<section id="content" class="content">

     {squarespace.main-content}

    <div id="sidebar" class="sidebar">

      <squarespace:block-field id="sidebarBlocks" columns="12" />

    </div>
</section>

和 CSS

.wrapper {}
.content {}
#sidebar {}

Answer 1

将侧边栏设计为 Web 用户控件，并将其放在母版页上的以下 div 结构中。

 <div id="parentContainer">   
        <div id="sitebody" >
            <asp:ContentPlaceHolder  runat="server" ID="MainContent" />    
        </div>
        <div id="sidebar">
            <uc1:ucSideBar ID="ucSideBar1" runat="server" />
        </div>
 </div>

使用 css 修饰 div；

#sidebar
{
    float: left;
    height: 80%;
    width: 250px;
}
 #sitebody
{
    float: left;
    padding: 0 10px;
    width: 60%;
    height :80%;
}

 #parentContainer
 {
    clear: both;
    float: left;
    width: 1500px;
 }

to see this in fiddle