当前位置:首页 > 开发 > Web前端 > Css > 正文

收集的css布局

发表于: 2015-11-13   作者:互联网   来源:转载   浏览:
css
摘要: 1 <title>左定宽,右自动</title> 2 <style> 3 body{margin:0px;padding:0px;} 4 .box .left,.box .right{ 5 height:200px;line-height: 200px;text-align: center; 6 } 7 .box .left{
 1 <title>左定宽,右自动</title>

 2 <style>

 3 body{margin:0px;padding:0px;}

 4 .box .left,.box .right{

 5     height:200px;line-height: 200px;text-align: center;

 6 }

 7 .box .left{

 8     float:left;width:200px;background-color:red;

 9 }

10 .box .right{

11     margin-left:210px;background-color: blue;

12 }

13 </style>

14 <body>

15     <div class="box">

16         <div class="left">左</div>

17         <div class="right">右</div>

18     </div>

19 </body>

 

 

 

 1 <title>左定宽,右自动(position+margin)</title>

 2 <style>

 3 body{margin:0px;padding:0px;}

 4 .box .left,.box .right{

 5     height:200px;line-height: 200px;text-align: center;

 6 }

 7 .box .left{

 8     position: absolute;width:200px;background-color:red;

 9 }

10 .box .right{

11     margin-left:210px;background-color: yellow;

12 }

13 </style>

14 <body>

15     <div class="box">

16         <div class="left">左</div>

17         <div class="right">右</div>

18     </div>

19 </body>

 

 1 <title>(两侧定宽,中间自适应)</title>

 2 <style>

 3 body{margin:0px;padding:0px;}

 4 .center,.left,.right{

 5     height:200px;line-height: 200px;text-align:center;

 6 }

 7 .left{

 8     float:left;width:200px;background-color:red;

 9 }

10 .right{

11     float:right;width:200px;background-color:yellow;

12 }

13 .center{

14     margin:0px 210px;background-color:blue;

15 }

16 </style>

17 <body>

18         <div class="left">左</div>

19         <div class="right">右</div>

20         <div class="center">中</div>

21 </body>

 

 1 <title>(两侧定宽,中间自适应)</title>

 2 <style>

 3 body{margin:0px;padding:0px;}

 4 .center,.left,.right{

 5     height:200px;line-height: 200px;text-align:center;

 6 }

 7 .left{

 8     position:absolute;top:0px;left:0px;width:200px;background-color:red;

 9 }

10 .right{

11     position:absolute;top:0px;right:0px;width:200px;background-color:yellow;

12 }

13 .center{

14     margin:0px 210px;background-color:blue;

15 }

16 </style>

17 <body>

18         <div class="left">左</div>

19         <div class="right">右</div>

20         <div class="center">中</div>

21 </body

 


收集的css布局

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号