側邊欄框一個在另一個

Question

簡單卻無法弄清楚。 Hot可以在頂部和一個波紋管上製作2個側邊欄框。這裏是演示 http://jsfiddle.net/logintomyk/fQPse/

<div id="sidebar"> 
    Text<br/>Sidebar 
</div> 
<div id="sidebar"> 
    Text<br/>Sidebar 
</div> 

這兩個側邊欄div的。

Answer 1

裹帶父元素其中添加float:right CSS太

#wrapper { 
 
    width: 90%; 
 
} 
 
#header { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: lightblue; 
 
} 
 
#content { 
 
    /* *** I want something that will change width to fill blank space when the user re-sizes the browser and the sidebar moves *** */ 
 
    margin-top: 4px; 
 
    background-color: yellow; 
 
} 
 
#content >p { 
 
    margin-right: 100px; 
 
    margin-top: 0px; 
 
} 
 
.sidebarGroup { 
 
    width: 100px; 
 
    float: right; 
 
} 
 
.sidebar { 
 
    width: 100px; 
 
    margin-top: 4px; 
 
    background-color: pink; 
 
} 
 
#footer { 
 
    width: 100%; 
 
    height: 40px; 
 
    margin-top: 4px; 
 
    background-color: red; 
 
}

<div id="Wrapper"> 
 
    <div id="header"> 
 
    header 
 
    </div> 
 
    <div class="sidebarGroup"> 
 
    <div class="sidebar"> 
 
     Text 
 
     <br/>Sidebar 
 
    </div> 
 
    <div class="sidebar"> 
 
     Text 
 
     <br/>Sidebar 
 
    </div> 
 
    </div> 
 

 

 
    <div id="content"> 
 
    <p> 
 
     Stuff 
 
     <br/>text 
 
     <br/>Just to fill some space 
 
    </p> 
 
    </div> 
 

 
    <div id="footer"> 
 
    footer 
 
    </div> 
 
</div>

Answer 2

這實際上是什麼框架，如Bootstrap是爲製造，但側邊欄：

<div id="page"> 
    <div id="header"> 
     header 
    </div> 
    <div id="content-wrapper">  
     <div id="sidebar"> 
      <div class="sidebar-box"> 
       I am sidebar content 
      </div> 
      <div class="sidebar-box"> 
       I am also sidebar content 
      </div> 
     </div> 
     <div id="content"> 
      Stuff<br/>text<br/>Just to fill some space 
     </div> 
     <div class="clearfix"> 
     </div> 
    </div> 
    <div id="footer"> 
     footer 
    </div> 
</div> 

然後：

#header { 
    background: red; 
} 
#content { 
    background: blue; 
    width: calc(100% - 104px); 
} 

#sidebar { 
    width: 100px; 
    float: right; 
} 
.sidebar-box { 
    background: green; 
} 

#footer { 
    background: yellow; 
    margin-top: 4px; 
} 

#content-wrapper { 
    margin-top: 4px; 
} 

#content:after { 
    content:''; 
    display:table; 
    clear:both; 
} 

竅門！

這裏的小提琴：http://jsfiddle.net/7pcLks4m/