两个列布局，一个在CSS中具有固定宽度 [英] Two column layout with one having a fixed width in CSS

问题描述

我想要一个漂亮的2列布局使用CSS浮动。

列＃1 160 px
列＃2 100％ ）。

我想先放置Col＃2的div，所以我的布局如下：

 < div id =header>< / div> 
< div id =content> 
< div id =col2>< / div> 
< div id =col1>< / div> 
< / div> 
< div id =footer>< / div> 
  

必须得到这个效果吗？

  div＃col2 {
 width：160px; 
 float：left; 
 position：relative; 
} 
 
 div＃col1 {
 width：100％; 
 margin-left：160px; 
} 
  

这假设列2应该显示为左侧栏，主要内容。

I want a nice 2 column layout using CSS float's.

Column#1 160 px Column#2 100% (i.e. the rest of the space).

I want to place the Col#2's div first, so my layout looks like:

<div id="header"></div>
<div id="content">
     <div id="col2"></div>
     <div id="col1"></div>
</div>
<div id="footer"></div>

What has to be get this effect?

解决方案

Neither of the above will work.

div#col2 {
    width: 160px;
    float: left;
    position: relative;
}

div#col1 {
    width:100%;
    margin-left: 160px;
}

That's assuming that Column 2 should appear as a left sidebar, with col 1 as the main content.

这篇关于两个列布局，一个在CSS中具有固定宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！