请写一个div左右两栏的代码,要求左栏只有一行,右栏要有两行代码,两边宽度为100px,左右各宽度50px
时间: 2024-03-15 15:44:14 浏览: 70
css div左右布局两种方式示例代码
3星 · 编辑精心推荐
可以参考如下代码实现:
```html
<div class="container">
<div class="left">左栏</div>
<div class="right">
<div>右栏第一行</div>
<div>右栏第二行</div>
</div>
</div>
```
```css
.container {
display: flex;
width: 200px;
}
.left {
width: 50px;
height: 50px;
background-color: blue;
}
.right {
width: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 50px;
}
.right div {
height: 50px;
background-color: red;
}
```
其中,使用了 Flexbox 布局,将 `.container` 设置为 `display: flex`,并且将左右两边的宽度都设置为 `50px`,中间的间隔也为 `50px`,总宽度为 `200px`。左边的蓝色块使用了 `background-color` 属性来设置背景颜色,右边的红色块则使用了 `justify-content` 属性来设置垂直方向的对齐方式为居中。
阅读全文