Skip to content

Instantly share code, notes, and snippets.

@nitta-honoka
Last active January 26, 2016 12:41
Show Gist options
  • Select an option

  • Save nitta-honoka/72fd96def1f156b808dd to your computer and use it in GitHub Desktop.

Select an option

Save nitta-honoka/72fd96def1f156b808dd to your computer and use it in GitHub Desktop.
双飞翼布局
/*双飞翼布局方式*/
.grid {
overflow: hidden;
padding-bottom: 5000px;
margin-bottom: -5000px;
margin-top: 100px;
}
#div-middle-02 {
float: left;
background-color: #fff9ca;
width: 100%;
height: 50px;
}
#middle-wrap-02 {
margin: 0 200px 0 150px;
}
#div-left-02 {
float: left;
position: relative;
background-color: red;
width: 150px;
margin-left: -100%;
height: 50px;
}
#div-right-02 {
float: left;
position: relative;
background-color: yellow;
width: 200px;
margin-left: -200px;
height: 50px;
}
<div class="grid">
<!--自适应的主要元素应放在文档流前面优先渲染,双飞翼适合各类布局,三列能自由分布-->
<div id="div-middle-02">
<div id="middle-wrap-02"><span>div-middle</span></div>
</div>
<div id="div-left-02"><span>div-left</span></div>
<div id="div-right-02"><span>div-right</span></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment