CSS 中段落和标题的对齐方式

debugcn 发表于 Dev

用户5447339

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

注：我写的文字Margin，并Padding让一切变得简单易懂。它不会出现在实际设计中

在这一刻，我能够在我的小提琴中得到这个。

唯一与小提琴中的上述设计不匹配的东西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;
}

双鱼座

这是您的代码的改进版本，仅使用 flexbox，不使用floats 或其他任何东西。

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

后端和前端将排在一行，图形设计师以及销售和营销将排在另一排。

假设您希望始终有 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。