0

这是我在 codepen 上的简化测试用例：http: //codepen.io/RonStrilaeff/pen/pKBdf

我的页面外边缘有两个固定宽度的侧边栏，它们之间的内容自动调整大小……这很有效。要求一侧栏在左侧，一侧栏在右侧。

但是，当屏幕变小时，我希望侧边栏被推到内容下方。这基本上与我的演示相反。:-)

我想知道的是我必须在我的媒体查询中做什么样的 css 魔法才能让它表现得那样？我认为它与浮动或清晰有关，我还没有掌握。或者，也许我需要以与 html 中的 div 不同的顺序开始。

任何帮助是极大的赞赏。

4

1 回答 1

0

从 Chris Coyier 的网站和论坛中收集到的一些原则对我有帮助。

这是我使用的解决方案（第一个 codepen 的一个分支）：

http://codepen.io/RonStrilaeff/pen/oefav

  • 将内容 div 放在第一位，并带有特定的边距以匹配侧边栏的宽度
  • 使侧边栏通常固定在包含侧边栏和内容的包装内（顶部、左侧或右侧）
  • 在所需的任何宽度上，使每个侧边栏保持静态并向左或向右浮动（由于源顺序，内容下方是自然的），同时删除相应的内容边距

瞧！

我对此非常满意，因为它根本不涉及太多代码，而且看起来很标准……即：没有“技巧”:-)

于 2013-08-30T12:40:50.677 回答