縮小以響應時，如何將這些圖像放置在徽標下方？

我有一個在右側的標題部分，除了如何正確的圖像塊移動，可以很好地縮小比例。圖像大小調整得很好，但是一旦我開始縮小尺寸，他們會將其推入徽標div中，然後放在其上方。縮小以響應時，如何將這些圖像放置在徽標下方？

我該如何定位它們以放置在標題下並相應地排列，同時保留在標題中，並且在達到某個屏幕尺寸時不會將顯示屏變爲無顯示？

Here是這些圖像/徽章的jsbin鏈接。實時網站在WordPress中，代碼太多，無法發佈。也許如果你只是使用Firebug或開發工具。

This是該網站的真人版。

另外，作爲一個旁註：我在活動網站上啓用了-190px頁邊距。

這裏僅供參考 enter image description here 截圖：

2015-06-20 jshuadvd

首先，您可以在'.badges-container'上殺死'margin：-190px'。然後設置'.badges {display：flex}'而不是'inline-block'。然後刪除'.badges img'上的'width'指令。那可能是一個開始的好地方。 – jreut

如果我這樣做，它會在logo div下引發一切，然後圖像不再響應。見[這裏]（http://i.imgur.com/KJGVgoV.png） – jshuadvd

oops。忘記提及將'.badges-container'的父'div.table-row'改爲'display：flex'。在較小的尺寸上仍然存在一些碰撞，但垂直的東西不再是問題。 – jreut

我設法解決這個問題。我添加了一個單獨的媒體查詢，如下所示：

@media screen and (max-width: 479px) { 

    .badges-container { 
    position: relative; 
    text-align: center; 
    margin-top: 0px 

    } 

    .badges img { 
    width: 19%; 
}

來源

2015-06-20 03:05:00 jshuadvd

縮小以響應時，如何將這些圖像放置在徽標下方？

回答

相關問題