首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >父div是flex,子div是flex:1的列,如何将右侧列的内容推到列的右侧?

父div是flex,子div是flex:1的列,如何将右侧列的内容推到列的右侧?
EN

Stack Overflow用户
提问于 2019-04-16 05:58:55
回答 1查看 120关注 0票数 1

我正在尝试将第二列中的"HELLO“推到列的右侧,而不改变第一列中"HELLO”的位置。实现这一目标的最简单方法是什么?

代码语言:javascript
复制
.row {
    display: flex;
}
.column {
    flex: 1;
}
.slideshow-photos {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mySlides {
    width: 100px;
    height: 100px;
}
代码语言:javascript
复制
<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>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-16 06:09:46

如果希望折叠最后一列,可以使用last-of-type伪类将flex-grow值重置为0

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55697792

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档