如何将两个div并排放置，其背景跨全宽，但其内容包含在换行中？

Question

Example image of what I'm trying to accomplish

I am trying to set up two divs side-by-side that are flexed. Where there background spans full width and the content is contained within a wrap.

<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>

So flex-grid would be display:flex and the flex-child divs would be flexed to be 50%. The flex-child__content would then be in a container, for example:

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

What is the best way this can be done?

Answer 1

Do you just want something like this? You seemed to be pretty much there already.

 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> 

Answer 2

You could use flex-grid, you assign spaces on a grid that each div will fill, you can get fancy with it.

 .flex-grid { background: #f00; display: grid; grid-template-columns: auto 512px 512px auto; grid-template-areas: "space1 left right space2"; } .flex-child { text-align:center; } .space1, #left { background: #0f0; } .space2, #right { background: #00f; } .space1 { grid-area: space1; } .space2 { grid-area: space2; } #left { grid-area: left; } #right { grid-area: right; } 

 <div class="flex-grid"> <div class="space1"></div> <div class="flex-child" id="left"> <p class="flex-child__content">content goes here</p> </div> <div class="flex-child" id="right"> <p class="flex-child__content">content goes here</p> </div> <div class="space2"></div> </div> 

Answer 3

I borrowed a bit css from @wassona, cleaned it up a bit and added my suggestion. Hope it works for you. In case you want the two boxes below each other on small devices add mediaqueries - set .bg-wrap background to none and set a bgcolor for each box (they are going to take the whole width in that case)

 .bg-wrap { background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(left, #253343 0%, #253343 50%, #406375 50.01%, #406375 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #253343 0%,#253343 50%,#406375 50.01%,#406375 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #253343 0%,#253343 50%,#406375 50.01%,#406375 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#253343', endColorstr='#406375',GradientType=1 ); /* IE6-9 */ } .wrap { width: 1030px; max-width: 100%; margin: 0 auto; } .flex-grid { display: flex; } .flex-child{ width: 100%; } .flex-child__content { display: inline-block; background-color: transparent; width: 100%; text-align: center; } .headline { color: #ffffff; } 

 <div class="bg-wrap"> <div class="wrap"> <div class="flex-grid"> <div class="flex-child"> <div class="flex-child__content"> <h2 class="headline">STUDENTS, PARENTS,<br>and TEACHERS</h2> </div> </div> <div class="flex-child"> <div class="flex-child__content"> <h2 class="headline">BUSINESS OWNERS<br>and EMPLOYEES</h2> </div> </div> </div> </div> </div>