모양의 요소는 너무 위압적이어서 한 줄을 차지합니다. 두 개의 블록 모양 요소를 나란히 표시하려면 어떻게 해야 할까요? 걱정하지 마세요. 요소를 부동으로 설정하면 원하는 결과를 얻을 수 있습니다.
기본적으로 모든 요소는 플로팅할 수 없지만 CSS를 사용하여 플로팅으로 정의할 수 있습니다. div, p, table, img 등의 요소는 플로팅으로 정의할 수 있습니다.
합시다. this 부동 예제를 작성합니다. 코드는 다음과 같습니다.
<!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> 위 코드는 블록 요소 div가 독점적인 줄을 차지한다는 것입니다. 이제 한 줄에 표시하고 사이에 약간의 거리를 추가해야 합니다. 다음 코드를 참조하세요.
<!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>이렇게 하면 우리가 원하는 효과가 완성됩니다. 먼저 첫 번째 div에 대해 왼쪽으로 부동 소수점을 만들어야 합니다. 그러면 두 개가 서로 연결되어 같은 줄에 표시됩니다.
다음으로 두 번째 div의 왼쪽 테두리를 만듭니다.
다음 섹션