首页一盒子中俩个div一个居中一个靠右

一盒子中俩个div一个居中一个靠右

时间: 2024-10-16 10:08:28 浏览: 48

在一个包含两个`<div>`元素的盒子里，如果你想让其中一个`<div>`水平居中，另一个`<div>`靠右对齐，可以使用CSS样式来实现。这里是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; /* 使用弹性布局 */ justify-content: space-between; /* 容器内项目间留有间隔，并且第一个项目居左，最后一个项目居右 */ } .centered-div { width: 50%; /* 或者设置flex-grow: 1; 自动填充可用空间 */ margin-right: auto; /* 左侧自动填充剩余空间使其居中 */ } .right-aligned-div { width: 49%; /* 右侧div占49%，留出1%给左侧间距 */ } </style> </head> <body> <div class="container"> <div class="centered-div">  居中div </div> <div class="right-aligned-div">  靠右div </div> </div> </body> </html> ``` 在这个例子中，`.centered-div`设置了`margin-right: auto`，使得它向左自动填充空间保持居中；而`.right-aligned-div`的宽度设定为49%，并利用`justify-content: space-between`让它们之间的距离均匀分布。

阅读全文