Chúng ta có thể căn chỉnh các phần tử trong html bằng cách sử dụng thuộc tính float CSS được sử dụng để định vị hoặc định dạng một hộp hoặc nội dung. Nhà phát triển có thể định vị phần tử về phía trái hoặc phải bằng CSS float.
Ví dụ
Hãy xem một ví dụ về thuộc tính float CSS để căn chỉnh các phần tử -
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ví dụ
Hãy xem một ví dụ khác về thuộc tính float CSS để căn chỉnh các phần tử -
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
