1

我有一个两列布局，左列的大小是灵活的，但右列的宽度是固定的。当您调整浏览器的大小时，左侧栏会缩小以允许右侧栏始终适合。

然而，在设定大小时，当左列达到最小宽度（由窗口的整体宽度决定）时，我们需要使用媒体查询堆叠列，以便它们可以不浮动并填充可用空间.

问题是，当这种情况发生时，由于必须编写标记的方式，右侧列出现在左侧列上方。我需要将右侧列（包含不太重要的信息）放在较小屏幕上的左侧列下方。

是否有可能让右列自然低于左列？是通过在标记中进一步实现尺寸效果，还是通过一些纯 CSS 解决方案？

我不想求助于javascript来更改元素顺序，如果可能的话，我真的不想让重复的div具有相同的内容来隐藏/取消隐藏，但是我知道这是否是唯一可行的解​​决方案.

这里有一个演示小提琴：http: //jsfiddle.net/jmxu2/

<div class='column-contain'>
  <div class='c-right'>
      The right floated div is secondary content, but fixed width.  It should drop below the primary content when there isn't enough room.
  </div>
  <div class='c-left'>
      This left div is primary content, but non fixed in size.  When there isn't enough room to nicely display side by side, this div should be on top.
  </div>
</div>
4

1 回答 1

1

右列将出现在顶部，因为它在 HTML 中是第一个。如果无法重新排序 HTML 中的元素，请尝试将以下内容添加到您的媒体查询中：

.c-left  {display: table-header-group; }
.c-right {display: table-footer-group; }

这会将具有这些类的每个元素放在一个伪表中，并相应地在流中对它们进行重新排序。显示为页眉的元素显示在显示为页脚的元素之上。

于 2013-09-29T00:34:04.273 回答