theluyuan/webveuje
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

float

Browse Source
This commit is contained in:
asd
2021-01-20 11:25:18 +08:00
parent 9853dbdd91
commit b8df71627e
21 changed files with 917 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
csspress/demo/floatbtn.html Normal file
View File

@@ -0,0 +1,87 @@
<!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>