如何把圖像放在圖像旁邊

Question

好的，因爲我添加的是一團糟，希望這次我做得更好。 https://codepen.io/anon/pen/QKqpow

#myTopnav{ 
clear:right; 
display: inline-block; 
} 

不能這樣做，因爲後來我的菜單就會變得混亂

該片段顯示了當前頁面的樣子，但我想實現的是什麼this(click) - 基本上我想在有菜單標題底部如圖所示。

Answer 1

在保持儘可能多你的代碼，並試圖解釋響應變化的興趣，這是我會做什麼：

1. 包裹#myTopnav和.social元素在另一個div，給一個類這就說得通了。在這裏我稱之爲.nav-group。
2. 給.icon的inline-block顯示值，並設定一個相對寬度（20％近似爲你在這裏）
3. 做同樣的新的div（.nav-group在這種情況下，有80％的寬度） 。將其位置設置爲relative。
4. 設置.social和#myTopnav的位置爲absolute，並相應對齊。

在這裏看到：http://codepen.io/anon/pen/yaPZgW

此解決方案假定您想要的標題的高度按比例縮放屏幕尺寸的變化，保持左側的標誌/圖標/圖像的尺寸。

但是，您將在較小的屏幕上遇到有關此設計的一些問題 - 您將看到我的意思，一旦你到達CSS中的斷點。有很多不同的方式來解決這個問題，這取決於你想在這個寬度和更小的尺寸上發生什麼。