使用 CSS 中的 float 属性实现左右对齐

cssweb developmentfront end technology更新于 2025/1/10 14:36:17

我们可以使用 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 浮动属性对齐元素的示例 −

<!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>