[英]image between 2 inline-table divs - doesn't work with bootstrap
I'm working on some trading ingame items site, that's not important here. 我正在一些游戏内物品交易网站上工作,在这里并不重要。
My actual code is: 我的实际代码是:
<div class="trade">
<h6><strong>RaiZeN</strong> wants to trade: (5 minutes ago)</h6>
<div class="items-holder">
<div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og/360fx360f');">
<div class="item-rarity">Field-Tested</div>
<div class="pink"></div>
</div>
<div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og/360fx360f');">
<div class="item-rarity">Field-Tested</div>
<div class="pink"></div>
</div>
</div>
<div class="arrow">
<img src="http://i.imgur.com/dusRcnt.png" />
</div>
<div class="items-holder">
<div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV086jloKOhcj8NrrHj1Rd6dd2j6fA9ImniQex_UQ_NT-nJtKRJgU3aFHY_Vm-ybrqjMO56Z3OnXE27HIq-z-DyAtSAyL7/360fx360f');">
<span class="item-rarity">Battle-Scared</span>
<div class="red"></div>
</div>
</div>
</div>
As you can see, the arrow is not at same height as rest. 如您所见,箭头的高度与静止高度不同。 But, if I will remove bootstrap (remove first html line), it works just fine. 但是,如果我要删除引导程序(删除第一行html行),它就可以正常工作。 Problem is, I need to use bootstrap on my site. 问题是,我需要在网站上使用引导程序。 How can I fix that? 我该如何解决?
check this - https://jsfiddle.net/7curr49y/1/ 检查一下-https://jsfiddle.net/7curr49y/1/
the changes i made are these - 我所做的更改是-
.items-holder
{
background-color: #E7E7E7;
border-radius: 4px;
padding: 10px;
display: inline-block;
border-collapse: separate;
border-spacing: 10px 0px;
vertical-align:middle;
}
changed "inline-table" to "inline-block" and added "vertical-align:middle". 将“ inline-table”更改为“ inline-block”,并添加了“ vertical-align:middle”。
hope that helps! 希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.