网易-布局解决方案

布局解决方案

1.居中布局

栗子：

<div class="parent">
    <div class="child">Demo</div>
</div>

1.水平居中

•  inline-block+text-align

.parent{text-align:center;}

.child{display:inline-block;}

• table+margin

.child{display:table;margin:0 auto;}

• absolute+transform

</pre><pre name="code" class="html"><pre name="code" class="html">.parent{position:relative;}

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

• flex+justify-content

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

2.垂直居中

• table-cell+vertical-align

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

• absolute+transform

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

• flex+align-items

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

3.水平垂直居中

• inline-block+text-align+table-cell+vertical-align

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

• absolute+transform

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

• flex+justify-content+align-items

.parent{
<span style="white-space:pre">	</span>display: flex;
<span style="white-space:pre">	</span>justify-content: center;
<span style="white-space:pre">	</span>align-items: center;
}<span style="white-space:pre">	</span>

2.多列布局

<div class="parent">
	<div class="left"></div>
	<div class="right">
		<p>right</p>
		<p>right</p>
	</div>
</div>

1.定宽+自适应

• float+margin

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

• float+margin+(fix)

<div class="parent">
    <div class="left">
    <span>	</span><p>left</p>
    </div>
    <div class="right-fix">
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

.left{
<span style="white-space:pre">	</span>float: left;
<span style="white-space:pre">	</span>width: 100px;
<span style="white-space:pre">	</span>position: relative;
}
.right-fix{
<span style="white-space:pre">	</span>float: right;
<span style="white-space:pre">	</span>width: 100%;
<span style="white-space:pre">	</span>margin-left: -100px;
}
.right{
<span style="white-space:pre">	</span>margin-left: 120px;


}

• float+overflow

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

.right{
	overflow: hidden;

}

• table

</pre><pre name="code" class="html">

</pre><pre name="code" class="html">.parent{
	width: 100%;
	display: table;
         table-layout:fixed;

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

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

}

</pre><ul><li>flex</li></ul><pre name="code" class="html">parent{
	display: flex;
}
.right{
	flex: 1;
}

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

<pre name="code" class="plain">

2.不定宽+自适应

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

.right{
	overflow: hidden;

}

• table

.parent{
	width: 100%;
	display: table;
}
.left,.right{
	display: table-cell;
}

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

}

.left p{width:100px;}

• flex

parent{
	display: flex;
}
.right{
	flex: 1;
}

.left{
	margin-right: 20px;
}

<pre name="code" class="html">.left p{width:100px;}

3.不定宽+不定宽+自适应

• float+overflow

<div class="parent">
    <div class="left">
    	<p>left</p>
    </div>
     <div class="center">
    	<p>left</p>
    </div>
    <div class="right">
            <p>right</p>
            <p>right</p>
    </div>
</div>

.left,.center{
	margin-right: 20px;
	float: left;
}
.left p,.center p{
	width: 100px;
}
.right{
	overflow: hidden;
}

4.等分

• float

<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>

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

• table

<div class="parent-fix">
    <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>
</div>

.parent-fix{
	margin-left: -20px;
}
.parent{
	width: 100%;
	display: table;
	table-layout: fixed;
}
.column{
	display: table-cell;
	padding-left: 20px;
}

• flex

.parent{
	display: flex;
}
.column{
	flex: 1;
}
.column+.column{
	margin-left: 20px;
}

5.等高

• table

</pre><pre name="code" class="html">

</pre><pre name="code" class="html">.parent{
	width: 100%;
	display: table;
         table-layout:fixed;

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

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

}

• flex

parent{
	display: flex;
}
.right{
	flex: 1;
}

.left{
	margin-right: 20px;
}

• float

.parent{ overflow: hidden; } 
.left,.right{ padding-bottom: 9999px; margin-bottom: -9999px; } 
.left{ float: left; margin-right: 20px; width: 100px; } 
.right{ overflow: hidden; }

 3.全屏布局

需求1

解决方案：

1.position(IE不支持）

  <div class="parent">
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="right">
        <div class="right-inner">
            right-inner
        </div>
    </div>
    <div class="bottom">bottom</div>
</div>
</div>

html,body,.parent{ width: 100%; overflow: hidden; } 
.top{ position: absolute; top: 0; left: 0; right: 0; height: 100px; }
.bottom{ position: absolute; left: 0; right: 0; bottom: 0; height: 100px; } 
.left{ position: absolute; width: 200px; left: 0; top: 100px; bottom: 100px; } 
.right{ position: absolute; left:200px; right: 0; top: 100px; bottom: 100px; overflow: auto;} 
.right-inner{ min-height: 1000px; }

2.flex（IE-9以下不支持）

<div class="parent">
    <div class="top">top</div>
    <div class="middle">
        <div class="left">left</div>
        <div class="right">
            <div class="right-inner">
                right-inner
            </div>
        </div>
    </div>
    <div class="bottom">bottom</div>
</div>
</div>

html,body,.parent{ width: 100%; overflow: hidden; } 
.parent{display: flex;flex-direction: column;}
.top,.bottom{height: 100px;}
.middle{flex: 1;display: flex;}
.left{width: 200px;}
.right{flex: 1;overflow: auto;}
.right-inner{ min-height: 1000px; }

需求2：

1.position(IE不支持）

<div class="parent">
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="right">
        <div class="right-inner">
            right-inner
        </div>
    </div>
    <div class="bottom">bottom</div>
</div>
</div>

html,body,.parent{ width: 100%; overflow: hidden; } 
.top{ position: absolute; top: 0; left: 0; right: 0; height: 10%; }
.bottom{ position: absolute; left: 0; right: 0; bottom: 0; height: 10%; } 
.left{ position: absolute; width: 20%; left: 0; top: 10%; bottom: 10%; } 
.right{ position: absolute; left:20%; right: 0; top: 10%; bottom: 10%; overflow: auto;} 
.right-inner{ min-height: 1000px; }

2.flex（IE-9以下不支持）

<div class="parent">
    <div class="top">top</div>
    <div class="middle">
        <div class="left">left</div>
        <div class="right">
            <div class="right-inner">
                right-inner
            </div>
        </div>
    </div>
    <div class="bottom">bottom</div>
</div>
</div>

html,body,.parent{ width: 100%; overflow: hidden; } 
.parent{display: flex;flex-direction: column;}
.top,.bottom{height: 10%;}
.middle{flex: 1;display: flex;}
.left{width: 20%;}
.right{flex: 1;overflow: auto;}
.right-inner{ min-height: 1000px; }

需求3

1.flex

<div class="parent">
    <div class="top">top</div>
    <div class="middle">
        <div class="left">left</div>
        <div class="right">
            <div class="right-inner">
                right-inner
            </div>
        </div>
    </div>
    <div class="bottom">bottom</div>
</div>
</div>

html,body,.parent{ width: 100%; overflow: hidden; } 
.parent{display: flex;flex-direction: column;}
.middle{flex: 1;display: flex;}
.right{flex: 1;overflow: auto;}
.right-inner{ min-height: 1000px; }

总结：