wiki:css:css_note:css_float

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:css:css_note:css_float [2021/07/26 14:28]
emblim98 [Float Next to Each Other]
+++ wiki:css:css_note:css_float [2023/01/13 18:44] (현재)
@@ 줄 137: / 줄 137: @@
 일반적으로 div 요소들은 서로 위에 표시됩니다(블록 요소처럼). 그러나 ''float: left''를 사용하면 요소들이 서로 옆에 플로트되도록 할 수 있습니다.\\
 ====예제====
-<code html>
+<code css>
-<!DOCTYPE html>
+<title>Float Next to Each Other</title>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Float Next to Each Other</title>
     <style>
-        div {
+      div {
-            float: left;
+        float: left;
-            padding: 15px;
+        padding: 15px;
-            color: white;
+        color: white;
-        }
+      }
-        .div1 {
+      .div1 {
-            background: red;
+        background: red;
-        }
+      }
-        .div2 {
+      .div2 {
-            background: dodgerblue;
+        background: dodgerblue;
-        }
+      }
-        .div3 {
+      .div3 {
-            background: green;
+        background: green;
-        }
+      }
     </style>
-</head>
+  </head>
-<body>
+  <body>
     <h2>Float Next to Each Other</h2>
@@ 줄 176: / 줄 168: @@
     <div class="div2">Div 02</div>
     <div class="div3">Div 03</div>
+  </body>
-</body>
-</html>
 </code>
@@ 줄 194: / 줄 183: @@
-{{tag>오션, CSS icons }}
+{{tag>오션, CSS Float }}

/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_float.1627277312.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)