Flex bootstrap 5.1.3 div 和价格不一致

Question

我正在使用 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/bootstrap@5.1.3/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 class="menu-section row align-items-baseline menu-row"> -->
    <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>

Answer 1

我的方法是查看您的两个 div。找到导致对齐问题的内容最多的那个。然后根据最大的渲染尺寸在较小的div上设置一个min-height。

因此，对于您的结构，右侧的 div 渲染得比左侧的大。内容量的差异导致 border-gray 及其第一个具有 flex 的子元素具有不同的高度。那么，我们需要在内容较少的 div 上设置 min-heights，以便它填充可用的 space 并对齐您的内容。这还包括在包含大量内容的 div 上设置 max-height（主要用于调整浏览器和内容换行的大小时）。

只要您遵循此方法，这应该适用于任何 varying-sized 内容。它主要依赖于找到 min-height 甜蜜点。请参阅我在 border-gray 上设置的 min-height 和我在其第一个子节点上设置的内联样式。

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

<html>

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

<body>
  <div class="container">
    <div>
      <h4>section name</h4>
    </div>
    <!-- <div class="menu-section row align-items-baseline menu-row"> -->
    <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>

Answer 2

您是否尝试过为其中一个元素指定高度？然后给出 height:auto;到另一个。这段代码也需要写得更好，我的意思是更简单，这样你可以更容易地看到问题！

Flex bootstrap 5.1.3 div 和价格不一致

Flex bootstrap 5.1.3 div and price not aligned

html

css

flexbox

twitter-bootstrap

bootstrap-5