CSS布局

一 居中布局

         1水平居中,需求:里面元素宽度不定外面元素宽度不定

         <div class="parent">

                  <div class="child">DEMO</div>

</div>

         方案一:

.parent{text-align: center;}

                  .child{display: inline-block;} //宽度根据内容而定

         方案二:

.child{display: table;margin: 0 auto;} //display位table的元素宽度也跟着内容定

         方案三:

.parent{height:1.5em;}

                  .parent{position: relative;}

                  .child{position: absolute;left: 50%;transform: translateX(-50%);}

                   // 绝对定位宽度由内容撑开

         方案四:

.parent{display: flex;justify-content: center;}

.child{margin: 0 auto;} //flex宽度由内容撑开

 

         2垂直居中,需求:父容器高度不固定,子容器高度不固定

方案一:

.parent{width:4em;height:500px;}

                  .child{width:100%;}

                  .parent{display: table-cell;vertical-align: middle;} 

方案二:

.parent{width:4em;height:500px;}

         .child{width:100%;}

         .parent{position: relative;}

         .child{position: absolute;top: 50%;transform: translateY(-50%)};

         方案三:

.parent{width:4em;height:500px;}

                  .child{width:100%;}

                  .parent{position: relative;}

                  .child{position: absolute;top: 50%;transform: translateY(-50%);}

 

         3水平和垂直都居中,需求:父子宽高未定

方案一:

         .parent{width:200px;height:300px;}

         .parent{text-align: center;display: table-cell;vertical-align: middle;}

         .child{display: inline-block;}

方案二:

         .parent{width:200px;height:300px;}

         .parent{position: relative;}

         .child{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

         方案三:

         .parent{width:200px;height:300px;}

         .parent{display: flex;justify-content: center;align-items: center;}

 

 

二:多列布局

         需求1:定宽 + 自适应

<div class="parent">

         <div class="left">

                   <p>left</p>

         </div>

         <div class="right">

                   <p>right</p>

                   <p>right</p>

         </div>

</div>

1

         .left{float: left;width: 100px;}

         .right{margin-left: 120px;}

2

         .left{float: left; width: 100px;position: relative;}

         .right-fix{float: right; width: 100%;margin-left: -100px;}

         .right{margin-left: 120px;}

3

         .left{float: left;width: 100px;margin-right: 20px;}

         .right{overflow: hidden;}

4

         .parent{display: table; width: 100%;table-layout: fixed;}

         .left,.right{display: table-cell;}

         .left{width: 100px;padding-right: 20px;}

 

需求2:两列定宽和一列自适应

         解决方案和一列定宽和一列自适应一样

 

需求3:一列不定款一列自适应

1

         .left{float: left;margin-right: 20px;}

         .right{overflow: hidden;}

         .left p{width: 200px;}

2

         .parent{display: table; width: 100%;}

         .left,.right{display: table-cell;}

         .left{width: 0.1%;padding-right: 20px;}

         .left p{width:200px;}

3

         .parent{display: flex;}

         .left{margin-right: 20px;}

         .right{flex: 1;}

         .left p{width: 200px;}

4

         .left,.center{float: left;margin-right: 20px;}

         .right{overflow: hidden;}

         .left p,.center p{width: 100px;}

 

需求4:等分布局

<div class="parent">

         <div class="column"><p>1</p></div>

         <div class="column"><p>2</p></div>

         <div class="column"><p>3</p></div>

         <div class="column"><p>4</p></div>

</div>

1

         .parent{margin-left: -20px;}

         .column{float: left;width: 25%;padding-left: 20px;box-sizing: border-box;}

2

         .parent-fix{margin-left: -20px;}

         .parent{display: table;width:100%;table-layout: fixed;}

         .column{display: table-cell;padding-left: 20px}

3

         .parent{display: flex;}

         .column{flex: 1;}

         .column+.column{margin-left:20px;}

posted @ 2016-11-22 12:52  花落无声Cjie  阅读(116)  评论(0编辑  收藏  举报