一、测试display
image.png
<!DOCTYPE html>
<html>
<head>
<title>div标签</title>
</head>
<body>
<p style="color:brown">div中元素垂直排列元素</p>
<div>
<!-- 元素1 -->
<div>
元素1
</div>
<!-- 元素2 -->
<div>
元素2
</div>
</div>
<hr>
<p style="color:brown">div中元素水平排列元素</p>
<div>
<!-- 元素1 -->
<div style="display:inline">
元素1
</div>
<!-- 元素2 -->
<div style="display:inline">
元素2
</div>
</div>
<hr>
<p style="color:brown">div中元素水平等分</p>
<div style="display:flex;flex-direction:row">
<!-- 元素1 -->
<div style="display:inline;flex:1">
元素1
</div>
<!-- 元素2 -->
<div style="display:inline;flex:1">
元素2
</div>
<!-- 元素3 -->
<div style="display:inline;flex:1">
元素3
</div>
</div>
<hr>
<p style="color:brown">div中元素水平排布，第一个和第二个从左到右排列，第三个靠右排列</p>
<div style="display:flex;flex-direction:row">
<!-- 元素1 -->
<div style="display:inline;background-color:bisque">
元素1
</div>
<!-- 元素2 -->
<div style="display:inline;flex:1;background-color:burlywood">
元素2
</div>
<!-- 元素3 -->
<div style="float:right;background-color:darkcyan">
元素3
</div>
</div>
<hr>
<p style="color:brown">div中元素水平排布，第一个和第二个从左到右排列，并且第二个元素稳步居中展示，第三个靠右排列</p>
<div style="display:flex;flex-direction:row">
<!-- 元素1 -->
<div style="display:inline;background-color:bisque">
元素1
</div>
<!-- 元素2 -->
<div style="display:inline;flex:1;background-color:burlywood;text-align:center">
元素2
</div>
<!-- 元素3 -->
<div style="float:right;background-color:darkcyan">
元素3
</div>
</div>
</body>
</html>
二、测试float
image.png
<html>
<body>
<div style="color:#00FF00;background-color:#00ee00">
<div style="color:#FF0000">
<label>测试1</label>
</div>
<label style="color:333333;background-color:#ffee00;float:left">测试2</label>
<div style="color:#000000; background-color:#ee00ff; float:left">
<label>测试3</label>
</div>
<div style="color:#FF0000; background-color:#00ffaa; float:left">
<label>测试4</label>
</div>
<div style="color:#000000; background-color:#ee00ff; float:left">
<label>测试5</label>
</div>
</div>
</body>
</html>
测试网址：
https://www.w3school.com.cn/tiy/t.asp?f=eg_html_div_test
网友评论