CSS DIV 如果我得到很长的描述，价格就不一致

Question

如果我得到很长的描述，价格就不一致。看这里： https://i.imgur.com/Etxj0p8.jpg

JSFiddle = https://jsfiddle.net/2n19tv75/

.border-gray {
  border: 1px solid #e5e7eb;
  float: left;
  width: 100%;
  min-height: 185px;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.menu-item-name {
  float: left;
  width: 60%;
  font-weight: 600;
  border: 1px solid blue;
}

.menu-item-price {
  width: 100%;
  float: right;
  font-weight: 700;
  text-align: left;
  border: 1px solid red;
}

.menu-item-desc {
  float: left;
  color: #889194;
  width: 60%;
  border: 1px solid green;
  display: inline-block;
  min-height: 80px;
}

.menu-item-image {
  float: right;
}

.menu-sectionname {
  margin-top: 50px;
}

.menu-row {
  --bs-gutter-x: 2rem !important;
  /* control column gap */
  --bs-gutter-y: 2rem !important;
  /* control row gap */
}

<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 class="menu">
      <div itemscope="" itemtype="http://schema.org/MenuSection">
        <div class="menu-sectionname">
          <h4>h4</h4>
        </div>
        <div class="menu-section row menu-row">
          <div class="menu-item col-12 col-sm-12 col-lg-6">
            <div class="border-gray">
              <div class="menu-item-name">
                <p>p text</p>
              </div>
              <div class="menu-item-image">
                <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="" />
              </div>
              <div class="menu-item-desc">
                <p>working good</p>
              </div>
              <div class="menu-item-price">
                <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="menu-item-name">
                <p>p text</p>
              </div>
              <div class="menu-item-image">
                <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="" />
              </div>
              <div class="menu-item-desc">
                <p>working good</p>
              </div>
              <div class="menu-item-price">
                <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€4.50</p></span></span>
              </div>
            </div>
          </div>
        </div>
        <div class="menu-sectionname">
          <h4>h4</h4>
        </div>
        <div class="menu-section row menu-row">
          <div class="menu-item col-12 col-sm-12 col-lg-6 border-gray-no-image">
            <div class="border-gray">
              <div class="menu-item-name">
                <p>p text</p>
              </div>
              <div class="menu-item-desc">
                <p> desc 3</p>
              </div>
              <div class="menu-item-price">
                <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€8.00</p></span></span>
              </div>
            </div>
          </div>
          <div class="menu-item col-12 col-sm-12 col-lg-6 border-gray-no-image">
            <div class="border-gray">
              <div class="menu-item-name">
                <p>p text</p>
              </div>
              <div class="menu-item-desc">
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. </p>
              </div>
              <div class="menu-item-price">
                <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
              </div>
            </div>
          </div>
          <div class="menu-item col-12 col-sm-12 col-lg-6 border-gray-no-image">
            <div class="border-gray">
              <div class="menu-item-name">
                <p>p text</p>
              </div>
              <div class="menu-item-desc">
                <p> desc 3</p>
              </div>
              <div class="menu-item-price">
                <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
              </div>
            </div>
          </div>
          <div class="menu-item col-12 col-sm-12 col-lg-6 border-gray-no-image">
            <div class="border-gray">
              <div class="menu-item-name">
                <p>p text</p>
              </div>
              <div class="menu-item-desc">
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus,
                  quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus
                  fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. </p>
              </div>
              <div class="menu-item-price">
                <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</body>

Answer 1

只需在每一行开头添加 align-items-baseline class。

.border-gray {
  border: 1px solid #e5e7eb;
  float: left;
  width: 100%;
  min-height: 185px;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.menu-item-name {
  float: left;
  width: 60%;
  font-weight: 600;
  border: 1px solid blue;
}

.menu-item-price {
  width: 100%;
  float: right;
  font-weight: 700;
  text-align: left;
  border: 1px solid red;
}

.menu-item-desc {
  float: left;
  color: #889194;
  width: 60%;
  border: 1px solid green;
  display: inline-block;
  min-height: 80px;
}

.menu-item-image {
  float: right;
}

.menu-sectionname {
  margin-top: 50px;
}

.menu-row {
  --bs-gutter-x: 2rem !important;
  /* control column gap */
  --bs-gutter-y: 2rem !important;
  /* control row gap */
}

<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 class="menu">
      <div itemscope="" itemtype="http://schema.org/MenuSection">
        <div class="menu-sectionname">
          <h4>h4</h4>
        </div>
        <div class="menu-section row align-items-baseline menu-row">
          <div class="menu-item col-12 col-sm-12 col-lg-6">
            <div class="border-gray">
              <div class="menu-item-name">
                <p>p text</p>
              </div>
              <div class="menu-item-image">
                <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="" />
              </div>
              <div class="menu-item-desc">
                <p>working good</p>
              </div>
              <div class="menu-item-price">
                <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="menu-item-name">
                <p>p text</p>
              </div>
              <div class="menu-item-image">
                <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="" />
              </div>
              <div class="menu-item-desc">
                <p>working good</p>
              </div>
              <div class="menu-item-price">
                <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€4.50</p></span></span>
              </div>
            </div>
          </div>
        </div>
        <div class="menu-sectionname">
          <h4>h4</h4>
        </div>
        <div class="menu-section row align-items-baseline menu-row">
          <div class="menu-item col-12 col-sm-12 col-lg-6 border-gray-no-image">
            <div class="border-gray">
              <div class="menu-item-name">
                <p>p text</p>
              </div>
              <div class="menu-item-desc">
                <p> desc 3</p>
              </div>
              <div class="menu-item-price">
                <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€8.00</p></span></span>
              </div>
            </div>
          </div>
          <div class="menu-item col-12 col-sm-12 col-lg-6 border-gray-no-image">
            <div class="border-gray">
              <div class="menu-item-name">
                <p>p text</p>
              </div>
              <div class="menu-item-desc">
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. </p>
              </div>
              <div class="menu-item-price">
                <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
              </div>
            </div>
          </div>
          <div class="menu-item col-12 col-sm-12 col-lg-6 border-gray-no-image">
            <div class="border-gray">
              <div class="menu-item-name">
                <p>p text</p>
              </div>
              <div class="menu-item-desc">
                <p> desc 3</p>
              </div>
              <div class="menu-item-price">
                <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
              </div>
            </div>
          </div>
          <div class="menu-item col-12 col-sm-12 col-lg-6 border-gray-no-image">
            <div class="border-gray">
              <div class="menu-item-name">
                <p>p text</p>
              </div>
              <div class="menu-item-desc">
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus,
                  quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus
                  fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. </p>
              </div>
              <div class="menu-item-price">
                <span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€10.00</p></span></span>
              </div>
            </div>
          </div>
        </div>

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

</body>

</html>

Answer 2

如果您不希望文本消失，您可以将文本框的设置高度设置得足够大以容纳最长的文本，但我认为这不是您想要的。

如果价格对齐很重要，您可以使用 flexbox 将位置更改为文本的一侧或文本上方，这样文本的长度就无关紧要了。

CSS DIV 如果我得到很长的描述，价格就不一致

CSS DIV prices are not aligned if I get a long description

html

css

flexbox

twitter-bootstrap

bootstrap-5