Question

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

但是，在设定的大小下，当左列达到最小宽度时（由窗口的整体宽度决定），我们需要使用媒体查询堆叠列，以便它们可以解除填充并填充空间可供他们使用。

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

是否有可能让正确的列自然落在左列之下？要么通过在标记中进一步实现尺寸效应，还是通过一些纯CSS解决方案？

我不想使用javascript来改变元素顺序，如果可能的话，我真的不想让重复的div具有相同的内容来隐藏/取消隐藏，但我知道如果这是只有可行的解决方案。

<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>

Answer 1

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

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

这会将每个元素与这些类放在一个伪表中，并相应地在流中重新排序。显示为标题的元素显示在显示为页脚的元素上方。

有一个固定的宽度右浮动div低于其他内容？

1 个答案: