[英]Elements moving out of vertical alignment
Having a layout issue. 出现布局问题。 I'm using Bootstrap for this project but not for the cards. 我正在为该项目使用Bootstrap,但没有用于卡片。
The project is available here: http://marcmurray.net/jay_test/# 该项目位于此处: http : //marcmurray.net/jay_test/#
The elements in the grid layout are all sized to the same height, but are not lining up on the same baseline. 网格布局中的元素大小均设置为相同的高度,但未在同一基线上对齐。 The cards with 2 lines seem to align higher up than ones with 1, but for the life of me I can't seem to figure out why. 两行的纸牌似乎比1行的纸更高对齐,但就我一生而言,我似乎无法弄清楚为什么。 Not sure if I can link to a codepen as the cards are generated dynamically, but the CSS relating to them is here: 由于卡是动态生成的,因此不确定是否可以链接到Codepen,但是与它们相关的CSS在这里:
.mix {
width: 30%;
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-left: 1em;
padding-right: 1em;
box-shadow: 2px 2px 2px #ddd;
display: inline-block;
margin-left: 1em;
}
.item {
text-align: center;
background-color: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: 30px;
line-height: 1.5em;
position: relative;
}
.item-bottom {
background-color: #f8f6f5;
width: 100%;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-ms-transition: all .25s;
-o-transition: all .25s;
transition: all .25s;
background-color: #F8F6F5;
height: 2em;
position: absolute;
bottom: 0px;
left: 0;
}
Anyone have any ideas? 有人有想法么?
I opened your website, and opened developer tools and removed dispaly: inline-block;
我打开了您的网站,打开了开发人员工具并删除了dispaly: inline-block;
from the element and it lined up nicely. 从元素开始,并且排列整齐。
These probably shouldn't be inline-blocks. 这些可能不应该是内联块。 They're clearly block-level elements. 它们显然是块级元素。
So: make them: 所以:让他们:
display: block;
float: left;
and they show up and sit properly. 他们出现并正确坐着。
Note: you have to remove the hard-coded styling of inline-block on the actual cards themselves or it will override what you're got. 注意:您必须在实际的卡上删除内联块的硬编码样式,否则它将覆盖您所获得的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.