让两个div横向排列 一个顶部一个居中
时间: 2023-07-13 16:40:51 浏览: 103
两个div如何并排一行具体该怎么实现
5星 · 资源好评率100%
可以使用 flex 布局来实现这个需求。首先,将两个 div 包裹在一个父容器中,设置该父容器的 `display` 属性为 `flex`,并设置 `flex-direction` 为 `row`,即可让两个子元素横向排列。然后,将上方的 div 的 `align-self` 属性设置为 `flex-start`,即可将其置于顶部,将下方的 div 的 `align-self` 属性设置为 `center`,即可将其居中。
HTML 代码示例:
```html
<div class="container">
<div class="top">顶部</div>
<div class="middle">居中</div>
</div>
```
CSS 代码示例:
```css
.container {
display: flex;
flex-direction: row;
}
.top {
align-self: flex-start;
}
.middle {
align-self: center;
}
```
阅读全文