view盒子浮动布局靠两侧对齐
时间: 2023-06-28 16:13:30 浏览: 125
要实现盒子浮动布局靠两侧对齐,我们可以考虑使用伸缩布局(flexbox)来实现。
首先,将父容器的 `display` 属性设置为 `flex`,并设置 `justify-content` 属性为 `space-between`,这将会让子元素之间均匀地分布在父容器内。
然后,我们可以使用 `margin-left: auto` 和 `margin-right: 0` 来将左侧的元素向右对齐,将右侧的元素向左对齐。
以下是示例代码:
```html
<div class="container">
<div class="left">左侧元素</div>
<div class="right">右侧元素</div>
</div>
```
```css
.container {
display: flex;
justify-content: space-between;
}
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
```
这样,左侧的元素就会靠右对齐,右侧的元素就会靠左对齐了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)