如何将div与菜单放在图像旁边

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中的断点，您将看到我的意思。有很多不同的方法可以解决这个问题，具体取决于你想要在那个宽度和更小的宽度发生什么。