상자나 콘텐츠의 위치를 지정하거나 서식을 지정하는 데 사용되는 CSS float 속성을 사용하여 html의 요소를 정렬할 수 있습니다. 개발자는 CSS float를 사용하여 요소를 왼쪽 또는 오른쪽으로 배치할 수 있습니다.
예시
요소를 정렬하는 CSS float 속성의 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<title>Alignment using CSS Float</title>
<style>
.screen {
padding: 10px;
width: 70%;
margin: 0 auto;
background-color: #f06d06;
text-align: center;
color: white;
border-radius: 0 0 50px 50px;
border: 4px solid #000;
}
.backSeats div{
margin: 10px;
padding: 10px;
color: white;
border: 4px solid #000;
}
.backSeats div {
background-color: #4CAF50;
}
.leftFloat{
float: left;
}
.rightFloat{
float: right;
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="backSeats">
<div class="leftFloat">Premium Left Seat 1</div>
<div class="leftFloat">Premium Left Seat 2</div>
<div class="rightFloat">Premium Right Seat 1</div>
</div>
</div>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
예시
요소를 정렬하는 CSS float 속성의 또 다른 예를 살펴보겠습니다. -
<!DOCTYPE html>
<html>
<head>
<title> Alignment using CSS Float</title>
<style type="text/css">
p {
float: left;
margin: 10px;
padding: 10px;
color:white;
background-color: #48C9B0;
border: 4px solid #145A32;
}
p.noneFloat{
float: none;
clear: both;
color: #34495E;
}
</style></head>
<body>
<p>I love Java.</p>
<p class="noneFloat">I think C# is better.</p>
<p>Even C isn't a bad choice.</p>
<p>I agree!</p>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
