html - CSS中段落和标题的对齐

Question

我尝试在 HTML 和 CSS 中复制下面的设计:

注意:我写了文本 Margin 和 Padding 以使事情更容易理解。它不会出现在实际设计中

此刻，我可以在我的 fiddle 中得到它.

fiddle 中唯一不符合上述设计的是每个框中没有换行符的段落(例如:我们的主要目标，我们最大的目标等)。我正在考虑将框作为每个带有标题(后端..，前端..等)和段落(例如:我们的主要目标，我们最大的目标等)的职位空缺。

每个框的 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 或其他任何东西。

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 的评论回答:

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

假设您希望始终有 2 行，那么您可以使用 flex:0 50% 而不是 flex:1，在本例中为 flex: 0 calc(50% - 30px) 计算边距

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>