将两个div同行显示,第一个div里的元素垂直居中显示,第二个div里的元素依次显示
时间: 2023-05-19 16:07:17 浏览: 64
可以使用flex布局来实现这个需求,具体代码如下:
HTML代码:
```
<div class="container">
<div class="first-div">
<p>这是第一个div里的元素</p>
</div>
<div class="second-div">
<p>这是第二个div里的第一个元素</p>
<p>这是第二个div里的第二个元素</p>
<p>这是第二个div里的第三个元素</p>
</div>
</div>
```
CSS代码:
```
.container {
display: flex;
align-items: center;
}
.first-div {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.second-div {
width: 50%;
}
```
这样就可以实现将两个div同行显示,第一个div里的元素垂直居中显示,第二个div里的元素依次显示的效果。
相关问题
angular的css里将两个div同行显示,第一个div里的元素垂直居中显示,第二个div里的是一个循环,在div里按行显示
可以使用flex布局来实现这个需求。具体代码如下:
HTML代码:
```
<div class="container">
<div class="left">
<div class="centered">
<!-- 第一个div里的元素 -->
</div>
</div>
<div class="right">
<div class="row" *ngFor="let item of items">
<!-- 第二个div里的循环元素 -->
</div>
</div>
</div>
```
CSS代码:
```
.container {
display: flex;
flex-wrap: wrap;
}
.left {
flex: 1;
}
.right {
flex: 2;
}
.centered {
display: flex;
justify-content: center;
align-items: center;
}
.row {
display: flex;
flex-wrap: wrap;
}
```
两个第div并排显示,一个居中一个靠右
可以使用flex布局来实现两个div并排显示,一个居中一个靠右。
HTML代码:
```html
<div class="container">
<div class="center">这个div居中显示</div>
<div class="right">这个div靠右显示</div>
</div>
```
CSS代码:
```css
.container {
display: flex;
justify-content: space-between; /* 左右两端对齐 */
align-items: center; /* 垂直居中 */
}
.center {
margin: 0 auto; /* 水平居中 */
}
.right {
margin-left: auto; /* 右对齐 */
}
```
这样,左侧的div会水平居中显示,右侧的div会靠右对齐显示。