在CSS中，我們可以使用浮動（float）或定位（position）屬性來將兩個盒子放在右側(cè)，下面是一些示例代碼：
方法一：使用浮動（float）
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid black;
float: right;
margin: 5px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>方法二：使用定位（position）
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
right: 0;
top: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>方法三：使用Flexbox
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: flex-end;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>方法四：使用Grid布局
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
justify-content: right;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
版權(quán)聲明：除非特別標(biāo)注，否則均為本站原創(chuàng)文章，轉(zhuǎn)載時請以鏈接形式注明文章出處。
