如果我得到一個長的描述，價格是不一致的。見這里： 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/[email protected]/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&w=120&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&w=120&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>uj5u.com熱心網友回復：
只需將align-items-baseline類添加到每一行開始。
.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/[email protected]/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&w=120&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&w=120&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>uj5u.com熱心網友回復：
如果您不希望文本消失，則可以將文本框設定為足夠大以容納最長文本的高度，但我認為這不是您想要的。
如果對齊的價格非常重要，您可以使用 flexbox 將位置更改為文本的一側或文本上方，這樣文本的長度就無關緊要了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/431648.html