CSS布局（2列布局，但如果没有边栏主列必须是100％宽） [英] CSS layout (2 column layout, but if no sidebar main column must be 100% wide)

问题描述

Column1（左）用于内容。列2（右/侧边栏）用于相关信息。说布局是66％/ 34％。如果没有侧边栏内容，我需要一种方法使Column1自动拉伸到100％。有任何想法吗。我知道可以做到。我只是不记得如何。

  + --------- + --------- + 
 |内容|侧栏| 
 + --------- + --------- + 
 
 
 + ------------ ------- + 
 | Content / no-sidebar | 
 + ------------------- + 
  

解决方案

您可以设置HTML;

 < div id =容器> 
< div id =content> content 
< div id =sidebar> sidebar< / div> 
< / div> 
< / div> 
  

和CSS like;

  #container {
 width：100％; 
} 
 #sidebar，#content {
 height：200px; 
 
} 
 #sidebar {
 width：200px; 
 float：left; 
} 
 #content {
 background：orange; 
} 
  

您可以用 px 与百分比。 这里 是现场演示。 p>

Column1 (left) is for content. Column2 (right/ sidebar) is for related info. say layout is 66%/34%. I need a way to make Column1 to stretch to 100% automatically if there is no sidebar content. Any idea's. I know it can be done. I just can't remember how.

+---------+---------+
| Content | sidebar |
+---------+---------+


+-------------------+
|Content/ no-sidebar|
+-------------------+

解决方案

You may set HTML like;

<div id="container">
    <div id="content">content
        <div id="sidebar">sidebar</div>
    </div>
</div>

and CSS like;

#container{
    width: 100%;
}
#sidebar, #content{
    height: 200px;

}
#sidebar{
    width: 200px;
    float: left;
}
#content{
    background: orange;
}

you may replace px with percentage. Here is a Live Demo.

这篇关于CSS布局（2列布局，但如果没有边栏主列必须是100％宽）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！