我正在尝试将第二列中的"HELLO“推到列的右侧,而不改变第一列中"HELLO”的位置。实现这一目标的最简单方法是什么?
.row {
display: flex;
}
.column {
flex: 1;
}
.slideshow-photos {
width: 100%;
height: 100%;
object-fit: cover;
}
.mySlides {
width: 100px;
height: 100px;
}
<div class='row'>
<div class='column'>
<p>HELLO</p>
</div>
<div class='column'>
<div class="photos-container">
<div class="mySlides">
<img class='slideshow-photos' src="https://www.animalfriends.co.uk/app/uploads/2014/08/06110347/Kitten-small.jpg">
</div>
</div<
</div>
</div>
发布于 2019-04-16 06:09:46
如果希望折叠最后一列,可以使用last-of-type
伪类将flex-grow
值重置为0
。
.row {
display: flex;
}
.column {
flex: 1;
}
.column:last-of-type {
flex: 0;
}
.slideshow-photos {
width: 100%;
height: 100%;
object-fit: cover;
}
.mySlides {
width: 100px;
height: 100px;
}
<div class='row'>
<div class='column'>
<p>HELLO</p>
</div>
<div class='column'>
<div class="photos-container">
<div class="mySlides">
<img class='slideshow-photos' src="https://www.animalfriends.co.uk/app/uploads/2014/08/06110347/Kitten-small.jpg">
</div>
</div<
</div>
</div>
https://stackoverflow.com/questions/55697792
复制相似问题