fixed float right div，但不同的堆叠顺序与媒体查询

Question

我有两个div，

<div class="right"></div> 
<div class="left"></div>

按此顺序。对于那些想知道为什么我这样订购HTML元素的人，请检查this问题。右侧div具有固定宽度以及CSS属性; float:right; 因此，当页面调整大小时，左侧div将展开以占据页面的其余部分。

然而，在某个宽度，我希望两个div都是100％宽，但堆叠使得右边的div

。

我意识到这与html元素的排序有关，但有没有办法使这个工作？我尝试了this线程的解决方案，但它似乎不起作用。

我有一个小提琴here。

修改

好的，所以我发现了答案。我错过了一个父容器 div，需要display:table;现在效果很好。

<div class="container">
<div class="right"></div>
<div class="left"></div>
</div>

CSS

 .container {
     display:table;
}

（虽然我无法让它在小提琴中工作......）

所以这里只有CSS解决方案，如果有人将来需要它。

8 个答案:

答案 0 :(得分：1)

一种解决方案可能是使用transform: scaleY(-1);和包装器。

如果符合您的需要，请尝试使用此代码：

<强> HTML

<div class="wrapper">
<div class="right"></div> 
<div class="left"></div>
</div>

<强> CSS

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed blue;    
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed red;
}

@media only screen and (max-width: 600px) {
    .right {       
        float: left;
        width: 100%;
    }
    .left {       
        float: left;
        width: 100%;
    }
    .wrapper{
        width:100%;
        position: absolute;
        float: left;
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    }
    div.wrapper > div {
    position: relative;
    float: right;
    display: block;
    min-height: 50px;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    }

}

聚苯乙烯。我将rgb值更改为红色和蓝色以提高可读性。

检查此演示：

http://jsfiddle.net/EXn6Z/11/

答案 1 :(得分：1)

您可以使用display: table属性。这不支持边框

DEMO http://jsfiddle.net/EXn6Z/12/

@media only screen and (max-width: 600px) {
    .main {
        display: table;
    }
    .right {
        display: table-footer-group;
        float: none;
        width: 100%;
    }
    .left {
        display: table-header-group;
        float: none;
        width: 100%;
    }
}

答案 2 :(得分：1)

您可以（ab）使用display: table-caption的强大功能使元素显示在其他元素之上，即使它出现在您的HTML代码中，尽管其他元素必须在display: table-row这里没有边框或背景如果您需要.left上的背景或边框，则必须添加额外的div。

Codepen：http://codepen.io/anon/pen/vdbcB

相关CSS（MQ）：

@media only screen and (max-width: 600px) {
  .right {
    display: table-row;
    float: none;
    width: 100%;
    margin-left: 0;
  }
  .left {
    display: table-caption;
    overflow: visible;
    width: 100%;
  }
}

---

如果您可以使用display: table添加父div，那么您不必强制display: table-row div.right（更好的选项imho）。这是由于浏览器创建的匿名框，当3个元素的完美系列table > row > cell完全没有...复杂的东西。

Codepen：http://codepen.io/anon/pen/eIfmn

HTML：

<div class="table-like">
  <div class="right">On right or below Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error maiores quos incidunt quaerat atque amet perspiciatis ad quae maxime, possimus tempore rerum laudantium, fugit laborum sint consequatur eveniet veniam?</div> 
  <div class="left">On left or above</div>
</div>

相关CSS（MQ）：

@media only screen and (max-width: 600px) {
  .table-like {
    display: table;
    width: 100%;
  }
  .right {
    float: none;
    width: auto;
    margin-left: 0;
  }
  .left {
    display: table-caption;
    overflow: visible;
    width: auto;
  }
}

---

即使这两个选项有效，也会导致问题，我建议您不要使用它们，除非您真的没有其他选择（例如桌面和平板电脑上的复杂布局，现在可以移动分辨率 - 首先在桌面 - 并且您的HTML订单已经设置，或者您的客户不会让更改HTML）

与可访问性相关的问题：WCAG 2.0技术H4：Creating a logical tab order through links, form controls, and objects

答案 3 :(得分：0)

你可能不喜欢这个，因为它涉及jQuery，但总的来说它非常简单：

$(window).resize(function(){
    if($(window).width() <= 600) {
        $('.right').before($('.left'));
    } else {
        $('.right').after($('.left'));
    }
});

小提琴：http://jsfiddle.net/LimitedWard/6ZE3B/

这种技术避免了不必要/重复的元素。

此技术也不是黑客攻击（与使用display:table）的其他答案不同。

注意：有一些方法可以提高效率，但这应该可以很好地完成工作。

答案 4 :(得分：0)

如果两个div在一个容器中是独立的（可能是body），那么只需将第一个div粘贴到底部（使用position: absolute和{{ 1}}）并向第二个bottom: 0添加margin-bottom。所有这些当然都在相关的媒体查询部分。

警告：如果两个div都有可变高度，那可能会有点困难。

HTML：

div

CSS：

<div id="container">
  <div id="right">nav</div>
  <div id="left">content</div>
</div>

小提琴：http://jsfiddle.net/zqDN7/

答案 5 :(得分：0)

Flexbox 布局可以是水平或垂直，可让您随意重新排列容器子级的顺序。

Codepen：http://codepen.io/anon/pen/FnLhu

HTML：

<div class="small-flex small-flex-v">
  <div class="right small-ml0 small-wauto">On right or below</div> 
  <div class="left small-flex-start">On left or above</div>
</div>

相关CSS（带有前缀为.small-的类的MQ）：

@media only screen and (max-width: 600px) {
  .small-flex {
    display : -webkit-box;
    display : -moz-box;
    display: -ms-flexbox;
    display : -webkit-flex;
    display : flex;
  }
  .small-flex-v {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .small-flex-start {
    -webkit-box-ordinal-group: -1;
    -moz-box-ordinal-group: 0;
    -ms-flex-order : -1;
    -webkit-order : -1;
    -moz-order : -1;
    order : -1;
  }
}

这是我对这个问题的第二个答案，没有table-caption 技巧 使用display: table-caption优于table-*-group或@ Victor的解决方案：这些元素的边框和/或背景没有问题
缺点：当display: table-*是IE8 +

时，兼容性是IE9 +

答案 6 :(得分：0)

这是display: flex用法的解决方案：

.wrap {
    display: flex;
    flex-flow: row wrap;
}

.left {
    min-height: 50px;
    border: 2px dashed #f0f;
    order: 1;
    flex-grow: 1;

}

.right {
    min-height: 50px;
    border: 2px dashed #00f;
    order: 2;
    width: 200px;
    margin-left: 10px;
}

@media only screen and (max-width: 600px) {
   .right,
   .left {
    flex: 1 100%;
    margin: 0;
  }
}

这样的标记：

<div class="wrap">
  <div class="right">right</div>
  <div class="left">left</div>
</div>

示例：http://jsfiddle.net/RVk9Q/1/

不要忘记使用所需的前缀

答案 7 :(得分：-1)

在您需要的地方添加另一个div，然后使用display隐藏/显示正确的地址。

HTML：

<div class="right-large"></div> 
<div class="left"></div>
<div class="right-mobile"></div>

CSS：

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f
}

.right-large, .right-mobile {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f
}

.right-mobile{
    display: none;
}

@media only screen and (max-width: 600px) {
    .right-large{
        display: none;
    }
    .right-mobile {
        display: block;
        float: right;
        width: 100%;
    }
}

<强> JSFIDDLE

相关问题

• 向右浮动一个固定的div并旋转它
• 向右浮动但保持逻辑顺序
• fixed float right div，但不同的堆叠顺序与媒体查询
• 对于某些媒体查询，如何将右div向左和向左浮动到右div下方
• 具有固定宽度的浮动div直到未知宽度的div
• CSS固定div，浮动左右定位
• 在div中浮动右固定的svg
• 浮动右div在左div上进行媒体查询
• 简单的DIV浮动/堆栈问题（固定右侧，左侧灵活，媒体规则）
• 向左浮动并在固定<div>元素

最新问题

• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

Answer 1

一种解决方案可能是使用transform: scaleY(-1);和包装器。

如果符合您的需要，请尝试使用此代码：

<强> HTML

<div class="wrapper">
<div class="right"></div> 
<div class="left"></div>
</div>

<强> CSS

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed blue;    
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed red;
}

@media only screen and (max-width: 600px) {
    .right {       
        float: left;
        width: 100%;
    }
    .left {       
        float: left;
        width: 100%;
    }
    .wrapper{
        width:100%;
        position: absolute;
        float: left;
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    }
    div.wrapper > div {
    position: relative;
    float: right;
    display: block;
    min-height: 50px;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    }

}

聚苯乙烯。我将rgb值更改为红色和蓝色以提高可读性。

检查此演示：

http://jsfiddle.net/EXn6Z/11/

Answer 2

您可以使用display: table属性。这不支持边框

DEMO http://jsfiddle.net/EXn6Z/12/

@media only screen and (max-width: 600px) {
    .main {
        display: table;
    }
    .right {
        display: table-footer-group;
        float: none;
        width: 100%;
    }
    .left {
        display: table-header-group;
        float: none;
        width: 100%;
    }
}

Answer 3

您可以（ab）使用display: table-caption的强大功能使元素显示在其他元素之上，即使它出现在您的HTML代码中，尽管其他元素必须在display: table-row这里没有边框或背景如果您需要.left上的背景或边框，则必须添加额外的div。

Codepen：http://codepen.io/anon/pen/vdbcB

相关CSS（MQ）：

@media only screen and (max-width: 600px) {
  .right {
    display: table-row;
    float: none;
    width: 100%;
    margin-left: 0;
  }
  .left {
    display: table-caption;
    overflow: visible;
    width: 100%;
  }
}

---

如果您可以使用display: table添加父div，那么您不必强制display: table-row div.right（更好的选项imho）。这是由于浏览器创建的匿名框，当3个元素的完美系列table > row > cell完全没有...复杂的东西。

Codepen：http://codepen.io/anon/pen/eIfmn

HTML：

<div class="table-like">
  <div class="right">On right or below Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error maiores quos incidunt quaerat atque amet perspiciatis ad quae maxime, possimus tempore rerum laudantium, fugit laborum sint consequatur eveniet veniam?</div> 
  <div class="left">On left or above</div>
</div>

相关CSS（MQ）：

@media only screen and (max-width: 600px) {
  .table-like {
    display: table;
    width: 100%;
  }
  .right {
    float: none;
    width: auto;
    margin-left: 0;
  }
  .left {
    display: table-caption;
    overflow: visible;
    width: auto;
  }
}

---

即使这两个选项有效，也会导致问题，我建议您不要使用它们，除非您真的没有其他选择（例如桌面和平板电脑上的复杂布局，现在可以移动分辨率 - 首先在桌面 - 并且您的HTML订单已经设置，或者您的客户不会让更改HTML）

与可访问性相关的问题：WCAG 2.0技术H4：Creating a logical tab order through links, form controls, and objects

Answer 4

你可能不喜欢这个，因为它涉及jQuery，但总的来说它非常简单：

$(window).resize(function(){
    if($(window).width() <= 600) {
        $('.right').before($('.left'));
    } else {
        $('.right').after($('.left'));
    }
});

小提琴：http://jsfiddle.net/LimitedWard/6ZE3B/

这种技术避免了不必要/重复的元素。

此技术也不是黑客攻击（与使用display:table）的其他答案不同。

注意：有一些方法可以提高效率，但这应该可以很好地完成工作。

Answer 5

如果两个div在一个容器中是独立的（可能是body），那么只需将第一个div粘贴到底部（使用position: absolute和{{ 1}}）并向第二个bottom: 0添加margin-bottom。所有这些当然都在相关的媒体查询部分。

警告：如果两个div都有可变高度，那可能会有点困难。

HTML：

div

CSS：

<div id="container">
  <div id="right">nav</div>
  <div id="left">content</div>
</div>

小提琴：http://jsfiddle.net/zqDN7/

Answer 6

Flexbox 布局可以是水平或垂直，可让您随意重新排列容器子级的顺序。

Codepen：http://codepen.io/anon/pen/FnLhu

HTML：

<div class="small-flex small-flex-v">
  <div class="right small-ml0 small-wauto">On right or below</div> 
  <div class="left small-flex-start">On left or above</div>
</div>

相关CSS（带有前缀为.small-的类的MQ）：

@media only screen and (max-width: 600px) {
  .small-flex {
    display : -webkit-box;
    display : -moz-box;
    display: -ms-flexbox;
    display : -webkit-flex;
    display : flex;
  }
  .small-flex-v {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .small-flex-start {
    -webkit-box-ordinal-group: -1;
    -moz-box-ordinal-group: 0;
    -ms-flex-order : -1;
    -webkit-order : -1;
    -moz-order : -1;
    order : -1;
  }
}

这是我对这个问题的第二个答案，没有table-caption 技巧 使用display: table-caption优于table-*-group或@ Victor的解决方案：这些元素的边框和/或背景没有问题
缺点：当display: table-*是IE8 +

时，兼容性是IE9 +

Answer 7

这是display: flex用法的解决方案：

.wrap {
    display: flex;
    flex-flow: row wrap;
}

.left {
    min-height: 50px;
    border: 2px dashed #f0f;
    order: 1;
    flex-grow: 1;

}

.right {
    min-height: 50px;
    border: 2px dashed #00f;
    order: 2;
    width: 200px;
    margin-left: 10px;
}

@media only screen and (max-width: 600px) {
   .right,
   .left {
    flex: 1 100%;
    margin: 0;
  }
}

这样的标记：

<div class="wrap">
  <div class="right">right</div>
  <div class="left">left</div>
</div>

示例：http://jsfiddle.net/RVk9Q/1/

不要忘记使用所需的前缀

Answer 8

在您需要的地方添加另一个div，然后使用display隐藏/显示正确的地址。

HTML：

<div class="right-large"></div> 
<div class="left"></div>
<div class="right-mobile"></div>

CSS：

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f
}

.right-large, .right-mobile {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f
}

.right-mobile{
    display: none;
}

@media only screen and (max-width: 600px) {
    .right-large{
        display: none;
    }
    .right-mobile {
        display: block;
        float: right;
        width: 100%;
    }
}

<强> JSFIDDLE