文本位置的HTMLDIV設定

在嘗試設定選單時，我想知道這種設計的正確方法。--樣式應該如下所示---

添加照片以顯示 -

所以我嘗試了一些不同的選項，這是我在代碼方面的表現......我嘗試使用多個 div，但是實作上述布局的最簡單方法是什么？我可以讓它以這種格式居中，但我不能讓文本在網格布局中成為上述樣式。

我的假設是它是我的 HTML，但我已經嘗試在它自己的 DIV 中寫入價格以試圖操縱位置，但這根本不符合。

.menu {
  width: 100%;
  height: auto;
  background-image: url("../img/staff-bartender.jpg");
  background-color: rgb(0, 4, 17);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  color: white;
}

<article class="menu">
  <h2>Food & Drink</h2>
  <div class="menuitems">
    <div>
      <h4 class="text-center quicksand-font text-uppercase">Drinks</h4>
      <p class="text-uppercase">Drinks Soda $2 Coke products
      </p>
      <p class="text-uppercase">Coffee $2 Cream and sugar</p>
      <p class="text-uppercase">Beer $5 Delicious and refreshing</p>
      <p class="text-uppercase">Wine $5 Light and fruity</p>
      <p class="text-uppercase">Cocktail $10</p>
      <div>
        <h4 class="text-center quicksand-font text-uppercase">Appetizers</h4>
        <p class="text-uppercase">fried Pickles $6 Golden and crispy with tang!</p>
        <p class="text-uppercase">Buffalo Wings $10 5 wings per order</p </div>
      </div>
    </div>

uj5u.com熱心網友回復：

試試這個代碼。

.menu {
        width: 100%;
        height: auto;
        background-image: url("../img/staff-bartender.jpg");
        background-color: rgb(0, 4, 17);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        text-align: center;
        color: white;
    }
    .menuitems_outer{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .menuitems{
        width: 50%;
        max-width: 30%;
        text-align: left;
    }
    .menuitems h5{
        display: flex;
        justify-content: space-between;
    }

<article class="menu">
    <h2>Food & Drink</h2>
    <div class="menuitems_outer">
        <div class="menuitems">
            <h4 class="text-center quicksand-font text-uppercase">Drinks</h4>
            <h5 class="text-uppercase">Drinks Soda <span>$2</span></h5>
            <p>Coke products</p>
            <h5 class="text-uppercase">Coffee <span>$2</span></h5>
            <p>Cream and sugar</p>
            <h5 class="text-uppercase">Beer <span>$5</span></h5>
            <p>Delicious and refreshing</p>
            <h5 class="text-uppercase">Wine <span>$5</span></h5>
            <p>Light and fruity</p>
            <h5 class="text-uppercase">Cocktail <span>$10</span></h5>
        </div>
        <div class="menuitems">
            <h4 class="text-center quicksand-font text-uppercase">Appetizers</h4>
            <h5 class="text-uppercase">Fried Pickles <span>$6</span></h5>
            <p>Golden and crispy with tang!</p>
            <h5 class="text-uppercase">Buffalo Wings <span>$10</span></h5>
            <p>5 wings per order</p>
        </div>
    </div>
</article>

標籤：html css 弹性盒

上一篇：使用SVG、HTML和CSS為網頁標題制作彎曲的文本

下一篇：在html/css中縮小時如何保持影像質量