float 속성

1 year ago · 5516d141d2
parent 4a2277c6b2
commit 5516d141d2
1 changed files with 41 additions and 0 deletions
--- a/positioning/3-4/default.html
+++ b/positioning/3-4/default.html
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width"/>
+    <style>
+        p {
+            text-align: justify;
+            width: 90%;
+            padding: 20px;
+        }
+
+        img {
+            float: left;
+            padding: 20px;
+        }
+
+        .box {
+            border: 1px solid;
+            width: 100px;
+            height: 100px;
+            float: left;
+            margin: 5px;
+        }
+        
+        p.box {
+            clear: left;
+        }
+    </style>
+</head>
+<body>
+    <img src="https://images.unsplash.com/photo-1718795903419-2bc5bba08d2f?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8fA%3D%3D">
+    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro quae voluptate tempora molestiae, laboriosam ipsum veniam rerum quibusdam ullam. Et perspiciatis deleniti dolor praesentium tempora modi tenetur voluptate nobis accusamus soluta facilis
+        quae veritatis sunt repudiandae aliquid consequuntur officia assumenda voluptates, eaque quo excepturi. Officiis quidem quia placeat ad voluptatem.</p>
+  
+      <div class="box">box1</div>
+      <div class="box">box2</div>
+      <div class="box">box3</div>
+      <p class="box">box4</p>	
+</body>
+</html>