[英]Block grid/inline-flex issue because of text length
我有一个正方形的方块网格,每个方块内都有文字。 仅一行文本时,一切正常。 正方形中的更多文本使其移动到其他文本的下方,并破坏网格。
另一个问题是,我希望一个正方形的顶部有一行附加的文本,如class="notice"
。 但是我也无法使它正常工作。
我创建了一个jsfiddle,以更清楚地显示问题所在。 我在flexbox上浏览了本指南 ,但似乎无法解决问题,不确定是否相关。 对于新手,任何帮助都将不胜感激。
<body>
<div class="container">
<div class="products">
<div class="product">
<p>Apples</p>
<a href="#"><span class="link"></span></a>
</div>
<div class="product">
<p class="notice">You won't find cheaper</p>
<p>Best price you will find on grapes</p>
<a href="#"><span class="link"></span></a>
</div>
<div class="product">
<p>Orange</p>
<a href="#"><span class="link"></span></a>
</div>
<div class="product" id="no">
<p>Best price you will find on grapes, bananas, kiwis</p>
<a href="#"><span class="link"></span></a>
</div>
<div class="product">
<p>Orange</p>
<a href="#"><span class="link"></span></a>
</div>
<div class="product">
<p>Orange</p>
<a href="#"><span class="link"></span></a>
</div>
</div>
</div>
</body>
.products {
text-align:center;
}
.product {
background-color: red;
display: inline-flex;
height: 10em;
margin-bottom: 10px;
position: relative;
width: 10em;
justify-content:center;
align-items:center;
}
.product p {
color: black;
}
.product p.notice {
font-size: 14px;
color: yellow;
}
.link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.product:hover, div.product:focus {
background-color: green;
}
不确定为什么需要display: inline-flex
每个产品项的display: inline-flex
。 您可以简单地使父对象成为具有以下display: flex
的flex容器display: flex
,使所有产品项目都变为flex项目。
HTML (无变化)
CSS (仅调整部分)
.products {
display: flex; /* establish primary flex container */
flex-wrap: wrap; /* enable flex items to wrap */
justify-content: center; /* center flex items horizontally, in this case */
}
.product {
height: 10em;
width: 10em;
margin: 5px;
position: relative;
display: flex; /* establish nested flex container */
flex-direction: column; /* stack flex items vertically */
justify-content: center; /* center flex items vertically, in this case */
align-items: center; /* center flex items horizontally, in this case */
background-color: red;
}
inline-flex,inline-block,inline-table,inline,img,..它们都位于基线上,您可以使用vertical-align:
.product {
background-color: red;
display: inline-flex;
vertical-align:top; /* HERE */
height: 10em;
margin-bottom: 10px;
position: relative;
width: 10em;
justify-content:center;
align-items:center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.