如何实现一行多列？
2017-08-05 本文已影响66人
肆意木
1 .Bootstrap 中可以引用 row 属性确定元素属于通一行，确定每个元素大小以及偏移量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container" style="margin-top: 200px">
<div class="row">
<div class="col-xs-3 col-sm-3">第一列</div>
<div class="col-xs-2 col-sm-3">第二列</div>
<div class="col-xs-2 col-sm-3">第三列</div>
</div>
</div>
</body>
</html>
2. CSS3 新增的多列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.multi_column {
-webkit-column-count: 3; // 表示布局几列
-webkit-column-rule: 1 px solid #bbb; //表示列与列之间的间隔条的样式
-webkit-column-gap: 2 em; // 表示列于列之间的间隔
}
</style>
<div class="multi_column">
<div>第一列</div>
<div>第二列</div>
<div>第三列</div>
</div>
</body>
</html>
3. position: absolute 绝对定位法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
h3{height: 100px;margin:20px 0 0;}
#left,#right{width: 200px;height: 100px; background-color: yellow;position: absolute;}
#left{left:2px;}
#right{right: 2px;}
#center{margin:2px 500px ;background-color: red;height: 100px; }
</style>
<div id = "left">我是左边</div>
<div id = "right">我是右边</div>
<div id = "center">我是中间</div>
</body>
</html>
4. float 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
#left,#right{ width: 200px;height: 200px; background-color: yellow }
#left {float: left;}
#right{float: right;}
#center{margin: 0 210px;height: 200px; background-color: red}
</style>
<div id = "left">我是左边</div>
<div id = "right">我是右边</div>
<div id = "center">我是中间</div>
</body>
</html>
5. CSS3 的盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
#box{width:100%;display: flex; height: 100px;margin: 10px;}
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: yellow}
#center_box{ flex:1; height: 100px;margin: 10px; background-color: red}
</style>
<div id = "box">
<div id = "left_box">我是左边</div>
<div id = "center_box">我是中间</div>
<div id = "right_box">我是右边</div>
</div>
</body>
</html>
6. display:inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.parent{font-size: 0px;}
.left,.right,.center{display:inline-block; vertical-align: top;font-size: 16px;}/*把元素的顶端与行中最高元素的顶端对齐*/
.left,.right{width: 100px;}
.center{width: calc(100% - 300px); margin: 0 20px;}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">左边</div>
<div class="center" style="background-color: pink;">中间</div>
<div class="right" style="background-color: lightgreen;">右边</div>
</div>
</body>
</html>
7. display:table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
p{margin: 0;}
.parent{display: table; width: 100%;table-layout: fixed;}
.left,.right,.centerWrap{display:table-cell;}
.left,.right{width: 100px;}
.center{margin: 0 20px;}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">左边</div>
<div class="centerWrap" style="background-color: orange;">
<div class="center" style="background-color: pink;">中间</div>
</div>
<div class="right" style="background-color: lightgreen;">右边</div>
</div>
</body>
</html>
