HTML+CSS 플로팅 모델로 쉽게 시작하기

모양의 요소는 너무 위압적이어서 한 줄을 차지합니다. 두 개의 블록 모양 요소를 나란히 표시하려면 어떻게 해야 할까요? 걱정하지 마세요. 요소를 부동으로 설정하면 원하는 결과를 얻을 수 있습니다.

기본적으로 모든 요소는 플로팅할 수 없지만 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의 왼쪽 테두리를 만듭니다.

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전