三栏式布局三栏式布局就是两边固定中间自适应。三栏式布局实现方法有很多包括流体布局BFC三栏布局双飞翼布局圣杯布局Flex布局Table布局绝对定位布局网格布局流体布局左侧向左浮动、右侧向右浮动最后渲染中间实现最后渲染中间也就意味着在html中内容div写在最后并设置中间模块的 margin 值使中间模块宽度自适应缺点就是主要内容无法最先加载当页面内容较多时会影响用户体验div classwrap div classleft左侧/div div classright右侧/div div classmain中间/div /divstyle *{ margin: 0; border: 0; } .left{ width: 100px; height:500px; background-color: yellow; float: left; } .right{ width: 200px; height: 500px; background-color: palevioletred; float: right; } .main{ height: 500px; background-color: aqua; margin-left: -100px; margin-right: -200px; } /style效果BFC布局BFC 区域不会与浮动元素重叠。左右模块各自向左右浮动并设置中间模块的overflowhidden使中间模块宽度自适应style *{ margin: 0; border: 0; } .left{ width: 100px; height:500px; background-color: yellow; float: left; } .main{ height: 500px; background-color: aqua; overflow: hidden; } .right{ width: 200px; height: 500px; background-color: palevioletred; float: right; } /style双飞翼布局按照“中左右”的顺序排放元素都设置浮动最中间元素宽度设置为100%利用左右margin负边距将左右元素拉到左右位置利用的是浮动元素和margin 负值中间设置子元素margin的左右值是左右两边元素的宽度主体内容可以优先加载HTML 代码结构稍微复杂点。div classwrap div classcenter div classcenter-child中间mmmmmmmmmm/div /div div classleft左侧/div div classright右侧/div /divstyle .wrap{ border: 1px solid #000; overflow: hidden; } .center{ width:100%; height:500px; background-color: yellow; float: left; } .center-child{ width:100%; height: 400px; background-color: aqua; //为子元素设置左右margin防止内容被遮挡 margin-left: 150px; margin-right: 250px; } .left{ width:150px; height:500px; background-color: red; float: left; margin-left: -100%; } .right{ width:250px; height:500px; background-color: blue; float: left; margin-left:-250px; } /style效果圣杯布局按照“中左右”的顺序排放元素都设置浮动最中间元素宽度设置为100%利用左右margin负边距将左右元素拉到左右位置圣杯布局使用padding和定位父元素设置左右padding再给左右元素设置相对定位div classwrap div classcenter/div div classleft/div div classright/div /divstyle .wrap{ border:1px red solid; padding:0 250px 0 200px; } .wrapdiv{ float: left; height:300px; } .wrap:after{ display:block; content: ; clear:both; } .center{ width:100%; background-color:yellow; } .left{ width:200px; background-color:blue; margin-left:-100%; position:relative; left:-200px; } .right{ width:250px; background-color:green; margin-left:-250px; position:relative; right:-250px; } /style效果Flex布局给父元素设置display: flex;justify-content: space-around即可代码简单方便div classwrap div classleft左侧/div div classcenter中间/div div classright右侧/div /divstyle .wrap{ display: flex; justify-content: space-around; } .left{ width:200px; height:500px; background-color: blue; } .center{ width:100%; height:500px; background-color: yellow; } .right{ width:100px; height:500px; background-color: pink; } /style效果最后要注意区分圣杯布局和双飞翼布局哦1
三栏式布局三栏式布局就是两边固定中间自适应。三栏式布局实现方法有很多包括流体布局BFC三栏布局双飞翼布局圣杯布局Flex布局Table布局绝对定位布局网格布局流体布局左侧向左浮动、右侧向右浮动最后渲染中间实现最后渲染中间也就意味着在html中内容div写在最后并设置中间模块的 margin 值使中间模块宽度自适应缺点就是主要内容无法最先加载当页面内容较多时会影响用户体验div classwrap div classleft左侧/div div classright右侧/div div classmain中间/div /divstyle *{ margin: 0; border: 0; } .left{ width: 100px; height:500px; background-color: yellow; float: left; } .right{ width: 200px; height: 500px; background-color: palevioletred; float: right; } .main{ height: 500px; background-color: aqua; margin-left: -100px; margin-right: -200px; } /style效果BFC布局BFC 区域不会与浮动元素重叠。左右模块各自向左右浮动并设置中间模块的overflowhidden使中间模块宽度自适应style *{ margin: 0; border: 0; } .left{ width: 100px; height:500px; background-color: yellow; float: left; } .main{ height: 500px; background-color: aqua; overflow: hidden; } .right{ width: 200px; height: 500px; background-color: palevioletred; float: right; } /style双飞翼布局按照“中左右”的顺序排放元素都设置浮动最中间元素宽度设置为100%利用左右margin负边距将左右元素拉到左右位置利用的是浮动元素和margin 负值中间设置子元素margin的左右值是左右两边元素的宽度主体内容可以优先加载HTML 代码结构稍微复杂点。div classwrap div classcenter div classcenter-child中间mmmmmmmmmm/div /div div classleft左侧/div div classright右侧/div /divstyle .wrap{ border: 1px solid #000; overflow: hidden; } .center{ width:100%; height:500px; background-color: yellow; float: left; } .center-child{ width:100%; height: 400px; background-color: aqua; //为子元素设置左右margin防止内容被遮挡 margin-left: 150px; margin-right: 250px; } .left{ width:150px; height:500px; background-color: red; float: left; margin-left: -100%; } .right{ width:250px; height:500px; background-color: blue; float: left; margin-left:-250px; } /style效果圣杯布局按照“中左右”的顺序排放元素都设置浮动最中间元素宽度设置为100%利用左右margin负边距将左右元素拉到左右位置圣杯布局使用padding和定位父元素设置左右padding再给左右元素设置相对定位div classwrap div classcenter/div div classleft/div div classright/div /divstyle .wrap{ border:1px red solid; padding:0 250px 0 200px; } .wrapdiv{ float: left; height:300px; } .wrap:after{ display:block; content: ; clear:both; } .center{ width:100%; background-color:yellow; } .left{ width:200px; background-color:blue; margin-left:-100%; position:relative; left:-200px; } .right{ width:250px; background-color:green; margin-left:-250px; position:relative; right:-250px; } /style效果Flex布局给父元素设置display: flex;justify-content: space-around即可代码简单方便div classwrap div classleft左侧/div div classcenter中间/div div classright右侧/div /divstyle .wrap{ display: flex; justify-content: space-around; } .left{ width:200px; height:500px; background-color: blue; } .center{ width:100%; height:500px; background-color: yellow; } .right{ width:100px; height:500px; background-color: pink; } /style效果最后要注意区分圣杯布局和双飞翼布局哦1
)
