CSS中段落和标题的对齐

Question

I have a design below which I am trying to replicate in HTML and CSS:

Note: I have written text Margin and Padding to make things easy to understand. It will not come in the actual design

At this moment, I am able to get this in my fiddle .

The only thing which is not matching the above design in the fiddle are the paragraphs (eg: Our main goal, Among our biggest, etc) in every box which don't have line break . I am considering boxes as every job-opening with titles (Back-end .., Front-end .., etc) and paragraphs (eg: Our main goal, Among our biggest, etc).

The CSS for every box is:

.firstrow {
    display: inline-block;
    width: 100%;
}


.firstrow #front-end {
    text-align: center;
    width: 50%;
    height: 250px;
    float: left;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    background-size: 100% 100%;
    justify-content: center;
}

Answer 1

Here is a improved version of your code, just using flexbox, without using float s or anything else.

 h2 { text-align: center; font-size: 2.8rem; color: #444444; } .row { display: flex; flex-wrap: wrap; padding: 5%; } .row>div { padding: 5%; background: gray; margin: 15px; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; text-align: center; flex: 1; box-sizing:border-box } 

 <div class="job-openings"> <h2>Seems Interesting? Apply Now</h2> <div class="row"> <div id="back-end"> <h3>Back-end Developer</h3> <p> Our main goal is to build and maintain the online platform and...</p> </div> <div id="front-end"> <h3>Front-end Web Developer</h3> <p>Among our biggest priorities are interface design and user experience...</p> </div> <div id="graphics"> <h3>Graphics Designer</h3> <p> We believe in the power of design. Our designers are motivated, creative and...</p> </div> <div id="sales"> <h3>Sales &amp; Marketing</h3> <p>Our Marketing team is focussed on driving growth and building a brand that customers love...</p> </div> </div> </div> 

Op's Comment to answer:

Back-end and front-end will come in one row with graphics designer and sales and marketing in another row.

Assuming you want to have always 2 rows, then you can use flex:0 50% instead of flex:1 , in this case flex: 0 calc(50% - 30px) to take in count the margin

 h2 { text-align: center; font-size: 2.8rem; color: #444444; } .row { display: flex; flex-wrap: wrap; padding: 5%; } .row>div { padding: 5%; background: gray; margin: 15px; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; text-align: center; flex: 0 calc(50% - 30px); box-sizing:border-box } 

 <div class="job-openings"> <h2>Seems Interesting? Apply Now</h2> <div class="row"> <div id="back-end"> <h3>Back-end Developer</h3> <p> Our main goal is to build and maintain the online platform and...</p> </div> <div id="front-end"> <h3>Front-end Web Developer</h3> <p>Among our biggest priorities are interface design and user experience...</p> </div> <div id="graphics"> <h3>Graphics Designer</h3> <p> We believe in the power of design. Our designers are motivated, creative and...</p> </div> <div id="sales"> <h3>Sales &amp; Marketing</h3> <p>Our Marketing team is focussed on driving growth and building a brand that customers love...</p> </div> </div> </div>