float 속성

main
Peace 1 year ago
parent 4a2277c6b2
commit 5516d141d2
  1. 41
      Ex3_Box model and 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>
Loading…
Cancel
Save