如何在div中並排對齊元素？

Question

我有一些需要並排對齊的內容。我已經為元素制作了 flex 方向列提供了 flex 樣式，並且還應用了 flex wrap。但是只有一個列中的項目。我想將項目顯示為像兩列一樣.我在下面添加了一個示例圖像，您可以參考它。我也無法對這些內容進行填充樣式。請修復它。

<section class="hero2">
        <div class="listeditems">
        <h1>Using Abstract</h1>
        <p>Abstract lets you manage, version, and document your designs in one place.</p>
        <h1>Manage organizations, teams, and projects</h1>
        <p>Use Abstract organizations, teams, and projects to organize your people and your work.</p>
        <h1>Using Abstract</h1>
        <p>Abstract lets you manage, version, and document your designs in one place.</p>
        <h1>Using Abstract</h1>
        <p>Abstract lets you manage, version, and document your designs in one place.</p>
        <h1>Using Abstract</h1>
        <p>Abstract lets you manage, version, and document your designs in one place.</p>
        <h1>Using Abstract</h1>
        <p>Abstract lets you manage, version, and document your designs in one place.</p>
    </div>
    </section>


.hero2{
    
    height: 600px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    

  }

  .hero2 .listeditems{

    margin: auto;
    
  }`

Answer 1

您可以通過以下兩種方式之一完成此操作。 無論如何，您必須將<h1>和<p>標簽包含在 div 中。

emre-ozgun提到的方式。 在我看來，這種方式看起來更干凈一些：

 .hero2 { height: 600px; display: flex; flex-direction: column; flex-wrap: wrap; }.hero2.listeditems { margin: auto; }.listeditems{ display: grid; grid-template-columns: 1fr 1fr; }

 <section class="hero2"> <div class="listeditems"> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Manage organizations, teams, and projects</h1> <p>Use Abstract organizations, teams, and projects to organize your people and your work.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> </div> </section>

或者你可以使用display: flex; . 正如您似乎要求的那樣，這種方式將是文字並排的。

 .hero2 { height: 600px; display: flex; flex-direction: column; flex-wrap: wrap; }.hero2.listeditems { margin: auto; }.listeditems{ display: flex; }

 <section class="hero2"> <div class="listeditems"> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Manage organizations, teams, and projects</h1> <p>Use Abstract organizations, teams, and projects to organize your people and your work.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> <div> <h1>Using Abstract</h1> <p>Abstract lets you manage, version, and document your designs in one place.</p> </div> </div> </section>