双飞翼模型的四种方式

科技前沿 • 2025-02-14 13:59 • 阅读 60

大家好，我是讯享网，很高兴认识大家。

两翼齐飞又叫双飞翼布局，是一个三列布局，中间自适应宽度，两翼固定宽度的一种布局模型。

1.三个盒子左浮动浮动,并且给左右两个盒子设为固定值.使用css中的width:calc(100% - 固定值)

css部分

<style> *{ padding: 0; margin: 0; } nav,aside,p{ float: left; background-color: red; width: 200px; height: 50px; } aside{ background-color: aqua; width: calc(100% - 400px); } </style>

讯享网

body部分

讯享网

讯享网<nav>我是左边部分</nav> <aside>我是中间部分</aside> <p>我是右边部分</p>

2.让两边盒子分别左右浮动,中间盒子左浮动.

 <style> * { padding: 0; margin: 0; } nav { float: left; background-color: red; width: 200px; height: 50px; } p { float: right; height: 50px; background-color: red; width: 200px; } aside { float: left; } header { overflow: hidden; height: 50px; background-color: aqua; box-sizing: border-box; } div { padding-left: 210px; padding-right: 210px; } </style> <header> <nav>我是左边部分</nav> <div> <aside> 我是中间部分 </aside> </div> <p>我是右边部分</p> </header>

3.父盒子使用display:flex,中间盒子使用flex-grow:1.

讯享网 <style> *{ padding: 0; margin: 0; } header{ display: flex; } nav,p{ background-color: red; height: 30vh; width:100px; } aside{ background-color: aqua; height: 30vh; flex-grow: 1; } </style> <header> <nav>我是左边部分</nav> <aside>我是中间部分</aside> <p>我是右边部分</p> </header>

3.三个盒子,其中一个盒子自适应宽度.两盒子给定固定宽度,并且绝对定位,分别固定到左右两边。不占位置,对自适应盒子设置内边距为上一个盒子的宽度,使内容不会被覆盖.

 <style> * { padding: 0; margin: 0; } nav { position: absolute; background-color: red; width: 200px; height: 50px; } p { position: absolute; background-color: red; right: 0px; top: 0px; width: 200px; height: 50px; } header { height: 50px; background-color: aqua; padding-left: 210px; padding-right: 210px; } </style> <nav>我是左边部分</nav> <header> <aside>我是中间部分</aside> </header> <p>我是右边部分</p>

双飞翼模型的四种方式

相关推荐