2016-02-27 69 views
0

我正在研究一些交易游戏项目网站,这在这里并不重要。
我实际的代码是:2行内表格div之间的图像 - 不适用于引导程序

<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> 

JSFIDDLE

正如你所看到的,箭头是不相同的高度休息。但是,如果我将删除bootstrap(删除第一个html行),它工作得很好。问题是,我需要在我的网站上使用bootstrap。我该如何解决这个问题?

回答

1

检查这 - https://jsfiddle.net/7curr49y/1/

我做出的更改是这些 -

.items-holder 
{ 
    background-color: #E7E7E7; 
    border-radius: 4px; 
    padding: 10px; 
    display: inline-block; 
    border-collapse: separate; 
    border-spacing: 10px 0px; 
    vertical-align:middle; 
} 

改变“直列表”到“内联块”,并增加“垂直对齐:中间”。

希望有帮助!

+0

谢谢,它工作正常。你知道为什么会发生吗? –

相关问题