flexBox布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flexBox布局</title> <style type="text/css"> .father { width: 800px; height: 400px; border: 1px solid #888888; display: flex; } .child1, .child2, .child3, .child4, .child5, .child6 { margin: 2px; background-color: #FF808E; } .child1 { flex: 4; } .child2, .child3, .child4, .child6 { flex: 1; } .child5 { width: 100px; flex: none; } </style> </head> <body> <div class="father"> <div class="child1">flex1</div> <div class="child2">flex2</div> <div class="child3">flex3</div> <div class="child4">flex4</div> <div class="child5">flex5</div> <div class="child6">flex6</div> </div> </body> </html>
float布局
1.使用float布局实现两栏布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float布局</title> <style type="text/css"> .father_box{ overflow: auto; } .left,.right,.left2,.right2{ height: 200px; width: 200px; } .left,.left2{ float: left; background-color: #888888; } .right{ margin-left: 200px; background-color: chartreuse; } </style> </head> <body> <div class="father_box"> <div class="left">左边</div> <div class="right">右边</div> </div> </body> </html>
2.使用float布局实现三栏布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float布局</title> <style type="text/css"> .father_box2::after{ content: ''; clear: both; display: block; visibility: hidden; height: 0; } .left,.right,.left2,.right2{ height: 200px; width: 200px; } .left,.left2{ float: left; background-color: #888888; } .right2{ float: right; background-color: crimson; } .center{ margin-left: 200px; margin-right: 200px; } </style> </head> <body> <div class="father_box2"> <div class="left2">左边</div> <div class="right2">右边</div> <div class="center">中间</div> </div> </body> </html>
inline-block布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>inline-block</title> <style> .container{ width: 800px; height: 200px; } .left{ background-color: pink; width: 200px; height: 200px; display: inline-block; } .right{ background-color: #bbbbbb; width: 500px; height: 200px; display: inline-block; } </style> </head> <body> <div class="container"> <div class="left">左边</div> <div class="right">右边</div> </div> </body> </html>
页面效果：
虽然并排在一起了，可是中间有间隙
解决方式：
第一种：
将其父元素字体大小设为零，并将他俩字体大小设置为相同大小。
<style> .container{ width: 800px; height: 200px; font-size: 0; } .left{ background-color: pink; width: 200px; height: 200px; display: inline-block; font-size: 14px; } .right{ background-color: #bbbbbb; width: 500px; height: 200px; display: inline-block; font-size: 14px; } </style>
第二种：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>inline-block</title> <style> .container{ width: 800px; height: 200px; /*font-size: 0;*/ } .left{ background-color: pink; width: 200px; height: 200px; display: inline-block; /*font-size: 14px;*/ } .right{ background-color: #bbbbbb; width: 500px; height: 200px; display: inline-block; /*font-size: 14px;*/ } </style> </head> <body> <div class="container"> <div class="left">左边</div><div class="right">右边</div> </div> </body> </html>
第三种和第二种类似：
<body> <div class="container"> <div class="left">左边</div><!-- --><div class="right">右边</div> </div> </body>
缺点：
如果要做一些自适应的设置有一些困难，对于定宽的东西比较适合用inline-block进行布局。
需要处理间隙