CSS

Question

我有一个设计，我试图在HTML和CSS中复制：

注意：我写了文字Margin和Padding，以便于理解。它不会出现在实际设计中

此时此刻，我可以在我的fiddle中获得此信息。

唯一与小提琴are the paragraphs (eg: Our main goal, Among our biggest, etc) in every box which don't have line break中的上述设计不匹配的东西。我正在考虑使用盒子作为每个职位空缺的标题（后端..，前端...等）和段落（例如：我们的主要目标，我们最大的，等等）。

每个框的CSS是：

.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

以下是代码的改进版本，仅使用flexbox，而不使用float或其他任何内容。

＆＃13;

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Op的评论回答：

  

后端和前端将与图形设计师和   销售和营销在另一排。

假设您想要总共有2行，那么您可以使用flex:0 50%代替flex:1，在这种情况下flex: 0 calc(50% - 30px)可以计算边距

＆＃13;

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;