Flex bootstrap 5.1.3 div 和价格不一致
我正在使用 flex = https://getbootstrap.com/docs/4.0/utilities/flex/
如果我的内容文本增加大小，则 div 和价格不会保持一致。 https://i.sstatic.net/LatWf.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 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&w=120&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&w=120&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>I am using flex = https://getbootstrap.com/docs/4.0/utilities/flex/
if my content text increase size the div and the price do not stay aligned.
https://i.sstatic.net/LatWf.jpg
What I am trying to achieve:
- div to have the same size when the content text is big or short.
- price always be aligned with the other one if the content text increases.
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 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&w=120&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&w=120&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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我处理这个问题的方法是查看你的两个 div。找到导致对齐问题的内容最多的那个。然后根据最大的 div 的渲染大小在较小的 div 上设置
min-height。因此，根据您的结构，右侧的 div 会比左侧的更大。内容量的差异导致 border-gray 及其第一个带有 flex 的子元素具有不同的高度。那么，我们需要在内容较少的 div 上设置
min-heights，以便它填充可用空间并对齐您的内容。这还包括在包含大量内容的 div 上设置max-height（主要用于调整浏览器大小和内容换行时）。只要您遵循此方法，这应该适用于任何不同大小的内容。它主要依赖于找到最小高度的最佳位置。请参阅我在
border-gray上设置的min-height以及我在其第一个子元素上设置的内联样式。The way I would approach this is to look at your two divs. Find the one with the most amount of content that is causing alignment issues. Then set a
min-heighton the smaller div based on the rendered size of the largest one.So with your structure, the div on the right is rendered larger than the left one. The difference in the amount of content causes both
border-grayand its first child with the flex to have different heights. So then, we need to setmin-heightson the div with less content so that it fills the available space and aligns your content. This also includes setting amax-heighton the div with lots of content (mostly for when resizing the browser and content wraps).This should work with any varying-sized content as long as you follow this approach. It mostly relies on finding that min-height sweet spot. See the
min-heightI set onborder-grayand the inline styles I set on its first child.您是否尝试过为其中一个元素赋予高度？然后给出高度：自动；到另一个。另外，这段代码需要写得更好，我的意思是更简单，这样你就可以更容易地看到问题！
Have you tried to give height to one of the elements? then give height:auto; to the other one. also this code needs to be writen better, with that i mean to be more simplier, that way you can can see issues easier!