Example image of what I'm trying to accomplish

我试图并排设置两个divs并排。在其中背景跨越全宽且内容包含在换行中的地方。

<div class="flex-grid">
    <div class="flex-child">
        <p class="flex-child__content">content goes here</p>
    </div>
    <div class="flex-child">
        <p class="flex-child__content">content goes here</p>
    </div>
</div>


因此,将显示flex-grid:flex并将flex-child div的屈曲度设置为50%。然后,flex-child__content将位于容器中,例如:

wrap { width: 1024px; margin: 0 auto; }


最好的方法是什么?

最佳答案

你只想要这样吗?您似乎已经在那里了。



div {
height: 50px;
background-color: gray;
}
.flex-grid {
display: flex;
}
.flex-child{
width:50%;
text-align: right;
background-color: red;
}
.flex-child:nth-child(2) {
text-align: left;
background-color: blue;
}
.flex-child__content {
display: inline-block;
background-color: transparent;
width: 50%;
text-align: center;
}

<div class="flex-grid">
    <div class="flex-child">
        <div class="flex-child__content">content goes here</div>
    </div>
    <div class="flex-child">
        <div class="flex-child__content">content goes here</div>
    </div>
</div>
<div></div>

10-07 19:53
查看更多