Question

我试图制作一个响应版的圣杯＆＃34; CSS layout by Matthew James Taylor

这样移动页面应该像这样呈现：

left
content
right

我尝试更改this fiddle中的float规则，但我无法使其正常运行。尝试将视口大小更改为600 px。

有没有办法在没有JavaScript的情况下执行此操作？

感谢您的帮助！

Answer 1

您可以使div相对并更改margin-top，使其顺序正确。

Answer 2

这非常hackish，但它至少让它们按正确的顺序排列。只有当你知道第1列的高度是什么时才能真正起作用。

.holygrail .col1
{
    margin:0;
    position:static;
    width:100%; 
    margin-top: 3ex;
}

.holygrail .col3
{
    left:0;
    width:100%;
    margin:0;
    float:none;
}

.holygrail .col2
{
    width:100%; 
    top:0;
    margin:0;
    right:0;
    position:absolute;
}

（这在媒体查询中。）

Answer 3

我对此进行了更多研究，并找到了another Stack Overflow question，其答案对您正在尝试做的事情进行了一些很好的讨论。（基本上，这不是CSS可以可靠地做的事情。）答案还包括一些比我之前提出的更好的黑客攻击。

Answer 4

您可以使用方向来实现此目标

CSS中的direction属性设置内容流的方向在块级元素内。这适用于文本，内联和内联块元素。它还设置文本的默认对齐方式表格单元格在表格行中流动的方向。 CSS：

.main-content {
  direction: rtl;  /* Right to Left */
}

有效值为：

ltr - 从左到右，默认rtl - 从右到左继承 -   从父元素
继承其值

来源：http://css-tricks.com/almanac/properties/d/direction/

如何使用响应式CSS更改HTML div的顺序？

4 个答案: