您的位置：首页 > Web前端 > CSS

纯css弹性布局

2018-02-01 15:37 225 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜(runoob.com)</title>

<style>

#main {

width: 300px;

height: 150px;

border: 1px solid #c3c3c3;

display: -webkit-flex; /* Safari */

-webkit-justify-content: space-around; /* Safari 6.1+ */

display: flex;

justify-content: space-around;

}

#main div {

width: 30px;

height: 70px;

}

</style>

</head>

<body>

<div id="main">

<div style="background-color:coral;"></div>

<div style="background-color:lightblue;"></div>

<div style="background-color:khaki;"></div>

<div style="background-color:pink;"></div>

</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。</p>

<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性。</p>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航