左右布局

注意：

浮动后，紧邻父类清除浮动。

<style>.div_left {float: left;width: 40%;height: 100px;background:red;}.div_right {float: right;width: 60%;height: 100px;background:yellow;}
</style></head><div class="clearfix"><div class="div_left"></div><div class="div_right"></div>
</div>

flex

<style>.content {display: flex;}.content div {flex: 1;/*用数值来定义收缩比率*/}.content div.div_left {background: red;height: 100px;}.content div.div_right {background: yellow;height: 100px;}</style></head><body><div class="content"><div class="div_left"></div><div class="div_right"></div></div></body>

左中右布局

左右两部分宽度固定，中间的部分填充剩余所有宽度

<style>.content {display: inline-block;width: 100%;}.content div.div_left {float: left;width: 100px;background: #f08200;}.content div.div_ {float: left;background: #000;}.content div.div_right {background: yellow;float: left;width: 50px;}</style></head><body><div class="content"><div class="div_left">左边</div><div class="div_">中间</div><div class="div_right">右边</div></div></body>

水平居中

1. margin: 0 auto;

<style>/*margin: 0 auto;*/.content {background: #f08200;width: 100px;height: 100px;margin: 0 auto;}</style></head><body><div class="content"></div></body>

2. 定位居中（position: absolute）

<style>/*position: absolute*/.content {position: absolute;left: 50%;top:20%;height: 100px;width: 100px;background: #f08200;}</style></head><body><div class="content"></div></body>

垂直居中

1.定位（position: absolute；top:50%;）

<style>/*position: absolute*/.content {position: absolute;left: 50%;top:50%;height: 100px;width: 100px;background: #f08200;}</style></head><body><div class="content"></div></body>

2.文本居中

<style>/*只支持单行文本居中*/.content {height: 30px;line-height: 30px;background: #f08200;}</style></head><body><div class="content">发的所发生的烦死哒烦死哒</div></body>

3.如果知道盒子的高，使用padding撑开。

display: flex; //
justify-content: center; //居中
align-items: center; //居中

其它

学习css布局

检测语言世界语中文简体中文繁体丹麦语乌克兰语乌兹别克语乌尔都语亚美尼亚语伊博语俄语保加利亚语信德语修纳语僧伽罗语克罗地亚语冰岛语加利西亚语加泰罗尼亚语匈牙利语南非祖鲁语卡纳达语卢森堡语印地语印尼巽他语印尼爪哇语印尼语古吉拉特语吉尔吉斯语哈萨克语土耳其语塔吉克语塞尔维亚语塞索托语夏威夷语威尔士语孟加拉语宿务语尼泊尔语巴斯克语布尔语(南非荷兰语)希伯来语希腊语库尔德语弗里西语德语意大利语意第绪语拉丁语拉脱维亚语挪威语捷克语斯洛伐克语斯洛文尼亚语斯瓦希里语旁遮普语日语普什图语格鲁吉亚语毛利语法语波兰语波斯尼亚语波斯语泰卢固语泰米尔语泰语海地克里奥尔语爱尔兰语爱沙尼亚语瑞典语白俄罗斯语科萨科西嘉语立陶宛语索马里语约鲁巴语缅甸语罗马尼亚语老挝语芬兰语苏格兰盖尔语苗语英语荷兰语菲律宾语萨摩亚语葡萄牙语蒙古语西班牙语豪萨语越南语阿塞拜疆语阿姆哈拉语阿尔巴尼亚语阿拉伯语韩语马其顿语马尔加什语马拉地语马拉雅拉姆语马来语马耳他语高棉语齐切瓦语

世界语中文简体中文繁体丹麦语乌克兰语乌兹别克语乌尔都语亚美尼亚语伊博语俄语保加利亚语信德语修纳语僧伽罗语克罗地亚语冰岛语加利西亚语加泰罗尼亚语匈牙利语南非祖鲁语卡纳达语卢森堡语印地语印尼巽他语印尼爪哇语印尼语古吉拉特语吉尔吉斯语哈萨克语土耳其语塔吉克语塞尔维亚语塞索托语夏威夷语威尔士语孟加拉语宿务语尼泊尔语巴斯克语布尔语(南非荷兰语)希伯来语希腊语库尔德语弗里西语德语意大利语意第绪语拉丁语拉脱维亚语挪威语捷克语斯洛伐克语斯洛文尼亚语斯瓦希里语旁遮普语日语普什图语格鲁吉亚语毛利语法语波兰语波斯尼亚语波斯语泰卢固语泰米尔语泰语海地克里奥尔语爱尔兰语爱沙尼亚语瑞典语白俄罗斯语科萨科西嘉语立陶宛语索马里语约鲁巴语缅甸语罗马尼亚语老挝语芬兰语苏格兰盖尔语苗语英语荷兰语菲律宾语萨摩亚语葡萄牙语蒙古语西班牙语豪萨语越南语阿塞拜疆语阿姆哈拉语阿尔巴尼亚语阿拉伯语韩语马其顿语马尔加什语马拉地语马拉雅拉姆语马来语马耳他语高棉语齐切瓦语

文本转语音功能仅限200个字符

选项 : 历史 : 反馈 : Donate

关闭

7.1 css布局

左右布局

左中右布局

水平居中

垂直居中

其它