Flexbootstrap5.1.3div和價格未對齊-有解無憂

我正在使用 flex = https://getbootstrap.com/docs/4.0/utilities/flex/

如果我的內容文本增加了 div 的大小并且價格不會保持一致。 https://i.imgur.com/7HXPMCi.jpg

我要存檔的內容=

當內容文本大或短時，div 具有相同的大小。
如果內容文本增加，價格總是與另一個一致。

JSFiddle = https://jsfiddle.net/scbxef5y/

<html>

<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<style>
.border-gray {
    border: 1px solid #000;
    min-height: 100px;
    padding: 20px;
}
</style>


<body>
<div class="container">
    <div>
        <h4>section name</h4>
    </div>
    <!-- <div > -->
    <div class="menu-section row align-items-baseline">
        <div class="menu-item col-12 col-sm-12 col-lg-6">
            <div class="border-gray">
                <div class="d-flex justify-content-between bd-highlight mb-2">
                    <div class="p-2 bd-highlight">
                        title
                        <div>
                            t contentcontent contentcontent contentcontent contentcontent content content contentcontent contentcontent content
                        </div>
                    </div>

                    <div class="p-2 bd-highlight">
                        <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="" />
                    </div>
                </div>

                <div class="d-flex align-content-end flex-wrap">
                    <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
                </div>
            </div>
        </div>
        <div class="menu-item col-12 col-sm-12 col-lg-6">
            <div class="border-gray">
                <div class="d-flex justify-content-between bd-highlight mb-2">
                    <div class="p-2 bd-highlight">
                        title
                        <div>
                            content t contentcontent contentcontent content t contentcontent contentcontentcontent t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent
                            contentcontent
                        </div>
                    </div>

                    <div class="p-2 bd-highlight">
                        <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="" />
                    </div>
                </div>

                <div class="d-flex align-content-end flex-wrap">
                    <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

uj5u.com熱心網友回復：

我會解決這個問題的方法是查看您的兩個 div。找到導致對齊問題的內容最多的一個。然后min-height根據最大 div 的渲染大小在較小的 div 上設定 a 。

因此，對于您的結構，右側的 div 比左側的大。內容量的差異導致兩者border-gray及其第一個具有 flex 的子項具有不同的高度。因此，我們需要min-heights在 div 上設定內容較少的內容，以便它填充可用空間并對齊您的內容。這還包括max-height在具有大量內容的 div 上設定 a （主要用于調整瀏覽器大小和內容換行時）。

只要您遵循這種方法，這應該適用于任何大小不同的內容。它主要依賴于找到最小高度的最佳位置。查看min-height我設定的border-gray和我在它的第一個孩子上設定的行內樣式。

.border-gray {
  border: 1px solid #000;
  padding: 20px;
  min-height: 300px;
}

<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>

<body>
  <div class="container">
    <div>
      <h4>section name</h4>
    </div>
    <!-- <div > -->
    <div class="menu-section row align-items-baseline">
      <div class="menu-item col-12 col-sm-12 col-lg-6">
        <div class="border-gray">
          <div class="d-flex justify-content-between bd-highlight mb-2" style="min-height: 300px;">
            <div class="p-2 bd-highlight">
              title
              <div>
                t contentcontent contentcontent contentcontent contentcontent content content contentcontent contentcontent content
              </div>
            </div>

            <div class="p-2 bd-highlight">
              <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="" />
            </div>
          </div>

          <div class="d-flex align-content-end flex-wrap">
            <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
          </div>
        </div>
      </div>
      <div class="menu-item col-12 col-sm-12 col-lg-6">
        <div class="border-gray">
          <div class="d-flex justify-content-between bd-highlight mb-2" style="min-height: 300px; max-height: 300px;">
            <div class="p-2 bd-highlight">
              title
              <div>
                content t contentcontent contentcontent content t contentcontent contentcontentcontent t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent
                contentcontent
              </div>
            </div>

            <div class="p-2 bd-highlight">
              <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="" />
            </div>
          </div>

          <div class="d-flex align-content-end flex-wrap">
            <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

uj5u.com熱心網友回復：

您是否嘗試為其中一個元素賦予高度？然后給出高度：自動；到另一個。這段代碼也需要寫得更好，我的意思是更簡單，這樣你就可以更容易地看到問題！

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/431647.html

標籤：html css 推特引导弹性盒引导程序 5

上一篇：CSS如何制作手持卡片的效果

下一篇：如果我得到一個長描述，CSSDIV價格不一致