我在同一个包装器中有4个div,我需要前3个对齐左(文本),第4个对齐右(图像)。
期望的效果如下。
<one> <
<two> Four
<three> >
html基本上只是包装器中的4个div,而css只能在包装器上显示:flex。
我已经部分地通过在包装器上添加flex方向列来实现这一点,所以所有4然后垂直堆叠但我需要第4个如上所述对齐。
任何帮助将非常感激。
谢谢
使用flexbox
:
* {
box-sizing: border-box;
}
.container {
height: 500px;
border: 1px solid green;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.item {
flex: 1;
padding: .5rem;
border: 1px dashed lightblue;
}
.one, .two, .three {
flex-basis: 33.333333%;
}
<div class="container">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
<div class="item four">4</div>
</div>
使用css-grid
:
* {
box-sizing: border-box;
}
.container {
height: 500px;
border: 1px solid green;
display: grid;
}
.item {
padding: .5rem;
border: 1px dashed lightblue;
}
.four {
grid-column: 2;
grid-row: 1 / span 3;
}
<div class="container">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
<div class="item four">4</div>
</div>
.wrapper {
display: flex;
flex-direction: row;
}
<div class="wrapper">
<div>
<div>one</div>
<div>two</div>
<div>three</div>
</div>
<div>
<div>four</div>
</div>
</div>
您可以简单地将最后一个元素设为绝对位置:
.wrapper {
display: inline-block;
padding-right: 100px;
position: relative;
}
.wrapper> :last-child {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 80px;
background: red;
}
<div class="wrapper">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>