左列自适应宽度的一行两列布局
http://www.flypeng.com win10系统 发布时间:2015-08-29 10:49 来源:鹏鹏电脑知识网 浏览:加载中
今天想实现一行两列的布局,左列宽度自适应,右列宽度保持不变。HTML的写法是: 
<p id="main">
    <p id="left"><p>左列</p></p>
    <p id="right"><p>右列</p></p>
</p>


现在加CSS,要实现的效果是mian是可变的,right层宽度为200px,并且固定不变,要让left的宽度随main的变化而变化。CSS的写法是:
#main{width:100%;background:#CCCCCC;}
#left{width:100%;margin-left:-200px;float:left;background:red;}
#right{width:200px;float:right;background:green;}


基本上达到所要的效果了,#left的宽度设置为100%,加个margin-left:-200px;让它向左移动200px,好让它腾出200px的空间塞进right层。但有一个问题,左列被移动的那200px隐藏了,看不到里面的东西,所以还必须增加一个DIV来辅助。

修改了一下,HTML代码,变成:
<p id="main">
    <p id="left">
        <p id="innerLeft"><p>左列</p></p>
    </p>
    <p id="right"><p>右列</p></p>
</p>


现在要让innerLeft把左边被隐藏的部分弄出来,所以得再加个margin-left:200px,修改后的CSS代码如下:
#main{width:500px;background:#CCCCCC;}
#left{width:100%;margin-left:-200px;float:left;background:red;}
#innerLeft{margin-left:200px;}
#right{width:200px;float:right;background:green;}


演示:


还有更简单的方法,至于为什么网上很少有人用,我也在论证:

如果你有好的win10资讯或者win10教程,以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到657025171#qq.com(#替换为@)。期待你的好消息!