Question

我已经做了一个设计，想在html和css中复制它。到目前为止，我已经做到了：

但是我希望它看起来像这样：

我尝试了很多定位工作，还尝试了flexbox，但最终总是看起来有点混乱。如果可能的话，我希望使用flexbox中的解决方案。

HTML

<section class="featuresSection">
            <div class="featuresSection-inner">

                <!--Find Movies Feature-->
                <div class="featuresSectionItem">
                    <div class="featureIconBorder">
                        <img>
                    </div>

                    <h3>Find your favourite Marvel Movies</h3>
                    <h4>Search for information on all your<br>
                        favourite marvel movies, animations,<br>
                        series and shows</h4>
                </div>

                <!--Cast Feature-->
                <div class="featuresSectionItem">
                    <div class="featureIconBorder">
                        <img>
                    </div>

                    <h3>Know your cast</h3>
                    <h4>Learn about the amazing cast members<br>
                        who acted in each and every marvel<br>
                        showcase</h4>
                </div>

                <!--Interact Feature-->
                <div class="featuresSectionItem">
                    <div class="featureIconBorder">
                        <img>
                    </div>

                    <h3>Interact with other fans</h3>
                    <h4>Talk with and discuss with other<br>
                        super marvel movie fans</h4>
                </div>
            </div>
        </section>

CSS

/*Features Section*/
.featuresSection-inner{
    padding: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.featureIconBorder{
    height: 150px;
    width: 150px;
    border: 4px solid #F92636;
    border-radius: 20px;
}

.featuresSectionItem{
    color: #F92636;
    font-family: Lao UI;
}

.featuresSectionItem h4{
    color: #F9647D;
    font-weight: normal;
}

Answer 1

将display：flex用于带有flex-direction：行的项目包装。然后将h3和h4包裹在另一个div中。

<section class="featuresSection">
  <div class="featuresSection-inner">

    <!--Find Movies Feature-->
    <div class="featuresSectionItem">
      <div class="featureIconBorder">
        <img>
      </div>
      <div class="text-wrapper">
        <h3>Find your favourite Marvel Movies</h3>
        <h4>Search for information on all your<br>
          favourite marvel movies, animations,<br>
          series and shows</h4>
      </div>

    </div>

    <!--Cast Feature-->
    <div class="featuresSectionItem">
      <div class="featureIconBorder">
        <img>
      </div>
      <div class="text-wrapper">
        <h3>Know your cast</h3>
        <h4>Learn about the amazing cast members<br>
          who acted in each and every marvel<br>
          showcase</h4>
      </div>
    </div>

    <!--Interact Feature-->
    <div class="featuresSectionItem">
      <div class="featureIconBorder">
        <img>
      </div>
      <div class="text-wrapper">
        <h3>Interact with other fans</h3>
        <h4>Talk with and discuss with other<br>
          super marvel movie fans</h4>
      </div>
    </div>
  </div>
</section>

/*Features Section*/
.featuresSection-inner {
  padding: 20px;
  padding-top: 50px;
  padding-bottom: 50px;

}

.featureIconBorder {
  height: 150px;
  width: 150px;
  border: 4px solid #F92636;
  border-radius: 20px;
}

.featuresSectionItem {
  color: #F92636;
  font-family: Lao UI;
  display: flex;
  margin-top: 30px;
}

.featuresSectionItem:first-of-type {
  margin-top: 0;
}

.featuresSectionItem h4 {
  color: #F9647D;
  font-weight: normal;
}

.text-wrapper {
  margin-left: 30px;
}

https://jsfiddle.net/q91udb8a/

Answer 2

您只能在.featuresSectionItem-display: flex;中添加一行，并为h3和h4添加一个包装器：

/*Features Section*/
.featuresSection-inner{
    padding: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.featureIconBorder {
    height: 150px;
    width: 150px;
    border: 4px solid #F92636;
    border-radius: 20px;
}

.featuresSectionItem{
    display: flex;
    color: #F92636;
    font-family: Lao UI;
}

.featuresSectionItem h4{
    color: #F9647D;
    font-weight: normal;
}

<section class="featuresSection">
  <div class="featuresSection-inner">

    <!--Find Movies Feature-->
    <div class="featuresSectionItem">
      <div class="featureIconBorder">
        <img>
      </div>

      <div>
        <h3>Find your favourite Marvel Movies</h3>
        <h4>Search for information on all your<br>
          favourite marvel movies, animations,<br>
          series and shows</h4>
      </div>

    </div>
  </div>
</section>

Answer 3

您可以使用flexbox做到这一点。

使主div在列上对齐。

.featuresSection-inner{
    padding: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
}

然后将节div逐行对齐。

.featuresSectionItem{
    color: #F92636;
    font-family: Lao UI;
    display: flex;
    flex-direction: row;
    align-items: center;
}

Answer 4

要获得结果，您期望只需要一个简单的display：flex即可完成您的每一行，该操作应放在具有相同类的容器中，然后在容器上应用display：flex 我已经用您在Codepen link to the code

上的代码进行了测试

/*Features Section*/
.featuresSection-inner{
    padding: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
  display:flex;
}

.featureIconBorder{
    height: 150px;
    width: 150px;
    border: 4px solid #F92636;
    border-radius: 20px;
  display:inline-block;
}

.featuresSectionItem{
    color: #F92636;
    font-family: Lao UI;
}

.featuresSectionItem h4{
    color: #F9647D;
    font-weight: normal;
}
.description{
  padding-left: 20px;
}

<section class="featuresSection">
            <div class="featuresSection-inner">
                <!--Find Movies Feature-->
                    <div class="featureIconBorder">
                        <img>
                    </div>
                  <div class="description">
                    <h3>Find your favourite Marvel Movies</h3>
                    <h4>Search for information on all your<br>
                        favourite marvel movies, animations,<br>
                        series and shows</h4>
                  </div>
             </div>

                <!--Cast Feature-->
                <div class="featuresSection-inner">
                    <div class="featureIconBorder">
                        <img>
                    </div>
                  <div class="description">
                    <h3>Know your cast</h3>
                    <h4>Learn about the amazing cast members<br>
                        who acted in each and every marvel<br>
                        showcase</h4>
                  </div>
                </div>

                <!--Interact Feature-->
                <div class="featuresSection-inner">
                    <div class="featureIconBorder">
                        <img>
                    </div>
                  <div class = "description">
                    <h3>Interact with other fans</h3>
                    <h4>Talk with and discuss with other<br>
                        super marvel movie fans</h4>
                  </div>
                </div>
            </div>
        </section>

div左对齐，文本右对齐

4 个答案: