-shaped elements are so overbearing that they occupy one line. What if we want two block-shaped elements to be displayed side by side? Don't worry, setting the element to float can achieve this wish.
Any element cannot float by default, but it can be defined as floating using CSS. Elements such as div, p, table, img, etc. can be defined as floating.
Let’s do this Write a floating example, the code is as follows
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
}
#dv2{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
</body>
</html>The above code is that the block element div occupies an exclusive line. Now we need to display them on one line, and then add some distance between the two divs. Please see the following code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
float:left;
}
#dv2{
width:100px;
height:100px;
background:red;
float:left;
margin-left:5px; /*调节俩个div之间的距离*/
}
</style>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
</body>
</html>In this way, the effect we want is completed. First, we need to make a float to the left for the first div, and the same for the second one. Then the two will be linked together and displayed on the same line.
Next we make a left border for the second div and that’s it
Next Section