标签：relative play 并且 ora 适应 ack more data- 像素
1 <style type="text/css"> 2 .layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;} 3 .layout:after{content:"";clear:both; display:block; height:0px; overflow:hidden;} 4 .wrap{} 5 .content{background-color:green; /*height:290px;*/} 6 .sidebar{background-color:blue; /*height:290px;*/ width:200px;} 7 .more{background-color:red; width:150px;} 8 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;} 9 p.clear{clear:both;} 10 /**简单结构1，列表在前，内容在后**/ 11 .layout-1{} 12 .layout-1 .sidebar{float:left;} 13 .layout-1 .more{float:right;} 14 .layout-1 .content{margin:0px 160px 0px 210px; _margin:0px 157px 0 207px; /*IE6下的3像素外边距问题*/} 15 .layout-1-1{} 16 .layout-1-1 .sidebar{float:right;} 17 .layout-1-1 .more{float:left;} 18 .layout-1-1 .content{margin:0px 210px 0px 160px; _margin:0px 207px 0 157px; /*IE6下的3像素外边距问题*/} 19 .layout-3{position:relative;} 20 .layout-3 .sidebar{position:absolute; left:10px; top:10px;} 21 .layout-3 .more{position:absolute; right:10px; top:10px;} 22 .layout-3 .content{margin:0px 160px 0 210px;} 23 .layout-3-1{position:relative;} 24 .layout-3-1 .sidebar{position:absolute; right:10px; top:10px;} 25 .layout-3-1 .more{position:absolute; left:10px; top:10px;} 26 .layout-3-1 .content{margin:0px 210px 0 160px ;} 27 </style> 28 <div class="layout layout-1"> 29 <div class="sidebar"><p>.layout-1 .sidebar{float:left;}</p></div> 30 <div class="more"><p>.layout-1 .more{float:right;}</p></div> 31 <div class="content"><p>.layout-1 .content{margin:0px 160px 0px 210px; _margin:0px 157px 0 207px; /*IE6下的3像素外边距问题*/}</p></div> 32 <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p> 33 </div> 34 <div class="layout layout-1-1"> 35 <div class="sidebar"><p>.layout-1-1 .sidebar{float:right;}</p></div> 36 <div class="more"><p>.layout-1 .more{float:left;}</p></div> 37 <div class="content"><p>.layout-1-1 .content{margin-right:210px; _margin-right:207px; /*IE6下的3像素外边距问题*/}</p></div> 38 <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p> 39 </div> 40 41 <div class="layout layout-3"> 42 <div class="sidebar"><p>.layout-3 .sidebar{position:absolute; left:10px; top:10px;}</p></div> 43 <div class="more"><p>.layout-3 .more{position:absolute; right:10px; top:10px;}</p></div> 44 <div class="content"><p>.layout-3 .content{margin:0px 160px 0px 210px;}</p></div> 45 <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p> 46 </div> 47 <div class="layout layout-3-1"> 48 <div class="sidebar"><p>.layout-3 .sidebar{position:absolute; right:10px; top:10px;}</p></div> 49 <div class="more"><p>.layout-3 .more{position:absolute; left:10px; top:10px;}</p></div> 50 <div class="content"><p>.layout-3 .content{margin:0px 210px 0px 160px;}</p></div> 51 <p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p> 52 </div>
1 <style type="text/css"> 2 .layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;} 3 .layout:after{content:"";clear:both; display:block; height:0px; overflow:hidden;} 4 .wrap{} 5 .content{background-color:green; /*height:290px;*/} 6 .sidebar{background-color:blue; /*height:290px;*/ width:200px;} 7 .more{background-color:red; width:150px;} 8 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;} 9 p.clear{clear:both;} 10 /**简单结构2，内容在前，列表在后**/ 11 .layout-10{} 12 .layout-10 .content{margin:0px 210px -60px 160px;} 13 .layout-10 .sidebar{float:right;} 14 .layout-10 .more{float:left;} 15 16 .layout-10-1{} 17 .layout-10-1 .content{margin:0px 210px 0px 160px;} 18 .layout-10-1 .sidebar{float:right; margin-top:-30px;} 19 .layout-10-1 .more{float:left; margin-top:-30px;} 20 .layout-11{position:relative;} 21 .layout-11 .content{margin-left:210px;} 22 .layout-11 .sidebar{position:absolute; left:10px; top:10px;} 23 .layout-11-1{position:relative;} 24 .layout-11-1 .content{margin-right:210px;} 25 .layout-11-1 .sidebar{position:absolute; right:10px; top:10px;} 26 </style> 27 <div class="layout layout-10"> 28 <div class="content"><p>.layout-10 .content{margin:0px 210px -60px 160px;}/**这里的margin-bottom:-60px;需要通过js来计算，取值为content区的高度，也可以给sidebar：margin-top:-30px;**/}</p></div> 29 <div class="sidebar"><p>.layout-10 .sidebar{float:right;}</p></div> 30 <div class="more"><p>.layout-10 .more{float:left;}</p></div> 31 <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p> 32 </div> 33 <div class="layout layout-10-1"> 34 <div class="content"><p>.layout-10-1 .content{margin:0px 210px 0px 160px;}</p></div> 35 <div class="sidebar"><p>.layout-10-1 .sidebar{float:right; margin-top:-30px;}/**这里的margin-top:-30px;需要通过js来计算，取值为content区的高度，也可以给content：margin-bottom:-30px;后边的元素需要清除浮动**/}</p></div> 36 <div class="more"><p>.layout-10-1 .more{float:left; margin-top:-30px;}</p></div> 37 <p class="clear">.layout-10-1 p{clear:both;}<br/>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p> 38 </div>
1 <style type="text/css"> 2 .layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;} 3 .layout:after{content:"";clear:both; display:block; height:0px; overflow:hidden;} 4 .wrap{} 5 .content{background-color:green; /*height:290px;*/} 6 .sidebar{background-color:blue; /*height:290px;*/ width:200px;} 7 .more{background-color:red; width:150px;} 8 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;} 9 p.clear{clear:both;} 10 /**复杂结构布局**/ 11 .layout-21{} 12 .layout-21 .wrap{ float:left; width:100%;} 13 .layout-21 .content{margin:0px 160px 0 210px;} 14 .layout-21 .sidebar{float:left; margin-left:-100%;} 15 .layout-21 .more{float:right; margin-left:-150px;} 16 .layout-22{} 17 .layout-22 .wrap{float:left; width:100%;} 18 .layout-22 .content{margin-right:210px;} 19 .layout-22 .sidebar{float:right; margin-left:-200px;} 20 .layout-23{} 21 .layout-23 .wrap{float:left; width:100%; margin-right:-200px;} 22 .layout-23 .content{margin-right:210px;} 23 .layout-23 .sidebar{float:left;} 24 .layout-24{} 25 .layout-24 .wrap{float:right; width:100%; margin-left:-200px;} 26 .layout-24 .content{margin-left:210px;} 27 .layout-24 .sidebar{float:left;} 28 </style> 29 <div class="layout layout-21"> 30 <div class="wrap"> 31 <div class="content"> 32 <p>.layout-21 .wrap{ float:left; width:100%;}<br />.layout-21 .content{margin-left:210px;}</p> 33 </div> 34 </div> 35 <div class="sidebar"> 36 <p>.layout-21 .sidebar{float:left; margin-left:-100%;/*如果最外边的div.layout,设置了border或者padding的话，那么ie6下的边距表现不对*/}</p> 37 </div> 38 <div class="more"><p>.layout-21 .more{float:right; margin-right:-100%;}</p></div> 39 <p class="clear">是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p> 40 </div>
标签：relative play 并且 ora 适应 ack more data- 像素
原文地址：https://www.cnblogs.com/qwguo/p/9903348.html
