（1）绝对定位法
（2）浮动
（3）浮动+定位
（4）flex 弹性布局

写一个左中右布局占满屏幕，左右两块固定宽度200，中间自适应宽，先加载中间块。

css样式默认加载顺序：样式表的元素选择器选择越精确，则其中的样式优先级越高；
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高。

所以，把类选择器 center 写在后面就可以先加载中间块。一共有以下几种方法可以实现：

（1）绝对定位法

将左右两边使用absolute定位，因为绝对定位使元素脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>html,body{margin: 0;width: 100%;}#leftDiv,#rightDiv{width: 200px;height: 200px;position: absolute;top: 0;}#leftDiv{background: #16A05D;left: 0;}#rightDiv{background: #DC5044;right: 0;}#centerDiv{background: #FFCD41;height: 200px;}</style></head><body><div id="leftDiv">左边div</div><div id="centerDiv">中间div</div><div id="rightDiv">右边div</div></body>
</html>

页面效果：

（2）浮动

使用对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}#leftDiv,#rightDiv{width: 200px;height: 200px;}#leftDiv{background: #16A05D;float: left;}#rightDiv{background: #DC5044;float: right;}#centerDiv{background: #FFCD41;height: 200px;margin: 0 200px;}</style></head><body><div id="leftDiv">左边div</div>      <div id="rightDiv">右边div</div><div id="centerDiv">中间div</div></body>
</html>

页面效果：

使用这种方式布局时，中间的div一定要放在最后，否则将不是想要的效果，如下图：

此时，布局方式为：

 <div id="leftDiv">左边div</div>    <div id="centerDiv">中间div</div><div id="rightDiv">右边div</div>

（3）浮动+定位

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}#leftDiv,#rightDiv{width: 200px;height: 200px;}#leftDiv{background: #16A05D;float: left;}#rightDiv{background: #DC5044;float: right;}#centerDiv{background: #FFCD41;height: 200px;left: 200px;right: 200px;position: absolute;}</style></head><body><div id="leftDiv">左边div</div>  <div id="centerDiv">中间div</div><div id="rightDiv">右边div</div> </body>
</html>

（4）flex 弹性布局

在外围包裹一层div，设置为display：flex；中间设置flex：1；但是盒模型默认紧紧挨着，可以使用margin控制外边距。

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}#contentDiv{width: 100%;display: flex;height: 200px;}#leftDiv,#rightDiv{width: 200px;height: 200px;}#leftDiv{background: #16A05D;}#rightDiv{background: #DC5044;}#centerDiv{background: #FFCD41;height: 200px;flex: 1;}</style></head><body><div id="contentDiv"><div id="leftDiv">左边div</div>    <div id="centerDiv">中间div</div><div id="rightDiv">右边div</div></div></body>
</html>

页面效果：

使用这种方法时，中间的div一定要放置在中间，否则，布局效果将不一样，如下图：

此时，布局方式为：

<div id="contentDiv"><div id="leftDiv">左边div</div>   <div id="rightDiv">右边div</div><div id="centerDiv">中间div</div>
</div>

css 写一个左中右布局占满屏幕，左右两块固定宽度200，中间自适应宽，先加载中间块相关推荐

[html] 写一个左中右的满屏布局，左右固定220px,中间自适应并且要优先加载
[html] 写一个左中右的满屏布局,左右固定220px,中间自适应并且要优先加载 <!DOCTYPE html> <html lang="en"> < ...
HTML中的div怎么左中右布局,CSS 之 div 左中右布局
无标题文档 #header{ width:780px;height:80px;background:#069;margin:0 auto; } #box { width:780px; margin:0 ...
html div左中右布局,求助css。一个div包含两个div，左右布局，左边css宽30%，右边div宽70%。高度均自...
求助css. 一个div包含两个div,左右布局,左边css宽30%,右边div宽70%.高度均自以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让 ...
用Html+css写一个渐变背景的个人名片
原文地址:10分钟用Html+css写一个渐变背景的个人名片_网页制作_青青个人博客个人名片在个人博客网站上的位置一般是在首页右上角,一点开网站就能看见,信息量并不多,但是对于访客说,可以直观快速的 ...
html页面设计成占满屏幕,关于html页面布局
之前做的一个网站,结果今天这几天测试发现在19寸屏幕和手机屏幕上页面布局全乱了,今天刚刚改好,发现还是自己经验不足,做个小总结. 一.div布局要固定宽高当div不设计长宽高而是自动由内部控件&qu ...
[html] 写一个三栏布局，中间固定，两边自适应（平均）
[html] 写一个三栏布局,中间固定,两边自适应(平均) <style>html,body {height: 100%;margin: 0;padding: 0;}.container ...
antD布局不能占满屏幕问题
当使用antD布局组件时会出现无法占满屏幕情况,如下: 在css文件中加入: .layout{min-height:100%; } 注意:如果加入height:100%(而非min-height:10 ...
教你用 css 写一个拟物化图标
拟物化(Skeuomorphism)风格的图标在iOS7发布之前广为流行.相当长一段时间,无论系统.网页还是第三方应用都争相使用拟物化的设计风格.那时候的dribbble网,各色优秀的拟物化设计作品也 ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
[html] 写一个三栏布局，两边固定，中间自适应
[html] 写一个三栏布局,两边固定,中间自适应 position + marginfloat + marginflex 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...

css 写一个左中右布局占满屏幕，左右两块固定宽度200，中间自适应宽，先加载中间块

（1）绝对定位法

（2）浮动

（3）浮动+定位

（4）flex 弹性布局

css 写一个左中右布局占满屏幕，左右两块固定宽度200，中间自适应宽，先加载中间块相关推荐

最新文章

热门文章