87 lines
2.5 KiB
HTML
87 lines
2.5 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Document</title>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* inline-bliock方法： */
|
|||
|
|
.btn1 {
|
|||
|
|
display: inline-block;
|
|||
|
|
background: blue;
|
|||
|
|
color: white;
|
|||
|
|
padding: 5px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn3 {
|
|||
|
|
display: block;
|
|||
|
|
background: pink;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* float方法： */
|
|||
|
|
.btn2 {
|
|||
|
|
display: inline-block;
|
|||
|
|
background: red;
|
|||
|
|
color: white;
|
|||
|
|
padding: 5px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
.btn{
|
|||
|
|
display: block;
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
.group1{
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
.wenzi{
|
|||
|
|
width: 400px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
<div class="group1">
|
|||
|
|
group1:
|
|||
|
|
<div class="btn1">提交</div>
|
|||
|
|
<div class="btn1">提交提交提交提交提交提交提交提交</div>
|
|||
|
|
<div class="btn2">编辑</div>
|
|||
|
|
<p class="wenzi">这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="group2">
|
|||
|
|
group2:
|
|||
|
|
<div class="btn1">提交</div>
|
|||
|
|
<div class="btn1">提交提交提交提交提交提交提交提交</div>
|
|||
|
|
<div class="btn3">添加</div>
|
|||
|
|
<div class="btn2">编辑</div>
|
|||
|
|
<div class="btn2">编辑编辑编辑编辑编辑编辑编辑编辑编辑</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="group1">
|
|||
|
|
<div>
|
|||
|
|
group3:
|
|||
|
|
</div>
|
|||
|
|
<div class="btn1 btn">提交</div>
|
|||
|
|
<div class="btn1 btn">提交提交提交提交提交提交提交提交</div>
|
|||
|
|
<div class="btn2 btn">编辑</div>
|
|||
|
|
<p class="wenzi">这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="zongjie">
|
|||
|
|
group1中 btn1，btn2定义了inlineblock 实现了div的宽度随内容自适应且多个div水平排列
|
|||
|
|
display:inline-block 将元素显示为行内块状元素 设置该属性后 其他的行内块级元素会排列在同一行
|
|||
|
|
使其既有block设置高度的特性 又有inline的同行特性
|
|||
|
|
|
|||
|
|
group2中，btn1,btn2还是同样的Inlineblock btn3是block 这时候 btn3的元素会独占一行 前后元素会换行显示
|
|||
|
|
</div>
|
|||
|
|
</html>
|