您的位置：首页 > 其它

两栏自适应布局，左边固定和右边固定的区别

2015-10-17 16:24 399 查看

说起两栏自适应，我好想研究一番，发现左边固定，右边自适应，和右边固定，左边自适应还有区别之处！

左边自适应代码：

<style type="text/css">

body{

margin: 0;

}

.container{ overflow:hidden; width:100%; height:auto;}

#nav { overflow:hidden; background:#CCC;}

#content{ width: 1000px; float:left;}

</style>

</head>

<body>

<div class="container">

<div id="content">

<p> 40多年来，有件事，习近平“花的精力最多”。那就是——扶贫。　对中国几十年来的减贫事业，他“有着深刻的切身体会”。2015减贫与发展高层论坛16日上午在人民大会堂举行，习近平发表主旨演讲时，提到当年的经历——　“上个世纪60年代末，我还不到16岁，就从北京来到了陕北一个小村庄当农民，一干就是7年。那时，中国农村的贫困状况给我留下了刻骨铭心的记忆。我当时和村民们辛苦劳作，目的就是要让生活能够好一些，但这在当年几乎比登天还难。” </p>

</div>

<div id="nav">

<p>40多年来，有件事，习近平“花的精力最多”。　那就是——扶贫。对中国几十年来的减贫事业，他“有着深刻的切身体会”。2015减贫与发展高层论坛16日上午在人民大会堂举行，习近平发表主旨演讲时，提到当年的经历——“上个世纪60年代末，我还不到16岁，就从北京来到了陕北一个小村庄当农民，一干就是7年。那时，中国农村的贫困状况给我留下了刻骨铭心的记忆。我当时和村民们辛苦劳作，目的就是要让生活能够好一些，但这在当年几乎比登天还难。”</p>

<p>菜单2</p>

<p>菜单3</p>

<p>菜单4</p>

</div>

</div>

</body>

测试结果

想当然的我以为，只要把content和nav的样式调换一下就好，再改为右浮动，可是情况总是不如人意，看来想当然还是想当然！只好是自己想办法了.

<style type="text/css">

body,p{

margin: 0; padding:0;

}

.container{ }

#nav { width: 200px; float:right; }

.container-wrap{ margin-right:-200px; float:left; width:100%;}

#content{ background:#CCC; margin-right:200px;}

.container:after {

height: 0;

content: ".";

display: block;

clear: both;

visibility: hidden;

}

</style>

<body>

<div class="container">

<div class="container-wrap">

<div id="content">

<p> 40多年来，有件事，习近平“花的精力最多”。那就是——扶贫。对中国几十年来的减贫事业，他“有着深刻的切身体会”。2015减贫与发展高层论坛16日上午在人民大会堂举行，习近平发表主旨演讲时，提到当年的经历——上个世纪60年代末，我还不到16岁，就从北京来到了陕北一个小村庄当农民，一干就是7年。那时，中国农村的贫困状况给我留下了刻骨铭心的记忆。我当时和村民们辛苦劳作，目的就是要让生活能够好一些，但这在当年几乎比登天还难。” </p>

</div>

</div>

<div id="nav">

<p>40多年来，有件事，习近平“花的精力最多”。那就是——扶贫。中国几十年来的减贫事业，他“有着深刻的切身体会”。2015减贫与发展高层论坛16日上午在人民大会堂举行，习近平发表主旨演讲时，提到当年的经历——上个世纪60年代末，我还不到16岁，就从北京来到了陕北一个小村庄当农民，一干就是7年。那时，中国农村的贫困状况给我留下了刻骨铭心的记忆。我当时和村民们辛苦劳作，目的就是要让生活能够好一些，但这在当年几乎比登天还难。”</p>

<p>菜单2</p>

<p>菜单3</p>

<p>菜单4</p>

</div>

</div>

</body>

我将这里的左边嵌套了一层，设置了作浮动，并将右边距设置为负值，内容部分就不设置浮动，而是将右边距设置为正值，这样就可以自适应了，这里的after伪类是用来清除浮动的，当然也可以在整个容器里面设置overflow：hidden，这样负容器也可以被子容器撑大。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航