Css 如何使第三个元素向左浮动？

我有四个要素。我需要元素3向左浮动，而其余元素向右浮动

附加因素

• 列的宽度不相等
• 无法使用

  position:absolute

  ，因为子对象的高度未知，包装器保持相对高度很重要
• 无法使用

  display:grid

  ，因为代码需要支持IE10
• 我无法对HTML中的元素重新排序。但是，我可以在某些元素周围包含各种包装，只要它们是有序的。原因是元素1、2、3和4应该在移动设备上按顺序显示，即响应

到目前为止我都试过了

• 使用浮动右/左-
• 使用浮动右/无-
• 使用内联块-
• 使用Flexbox-

更新

• 我已经更新了这个问题，说我不能对HTML重新排序

---

您可以使用jQuery获取四个元素的高度，并将包装的高度设置为两列中较高的一列的高度。此解决方案基于flexbox方法。我只是稍微更改了元素“三”的高度，以演示两列可能不同的高度：

注意：现在左栏较高。如果将

.tree

的高度更改为小于600px，则会看到包装器获得了右侧列的高度

$（文档）.ready（函数（）{
var heightthree=$（'.three'）.outerHeight（）；
var heightone=$（'.one'）.outerHeight（）；
var heighttwo=$（'.two'）.outerHeight（）；
var heightfour=$（'.four'）.outerHeight（）；
var heightright=高度一+高度二+高度四；
如果（高度三>高度右）{
$（'.wrapper'）.css（'height'，heightthree）
}否则{
$（'.wrapper'）.css（'height'，heightright）
}
})

html，正文{
保证金：0；
}
.包装纸{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
背景：#fa0；
}
.一{
顺序：2；
高度：200px；
背景：#999；
宽度：55%；
}
.二{
顺序：3；
高度：200px；
背景：#888；
宽度：55%；
}
.三{
顺序：1；
高度：620px；
背景：黑色；
宽度：45%；
颜色：白色；
}
.4{
顺序：4；
高度：200px；
背景：#777；
宽度：55%；
}

一
二
三
四

这是你要找的东西吗

.wrapper{
宽度：100%；
颜色：白色；
}
.一{
高度：200px；
背景：#999；
宽度：55%；
溢出：自动；
}
.二{
高度：200px；
背景：#888；
宽度：55%；
溢出：自动；
}
.三{
浮动：左；
高度：600px；
背景：黑色；
宽度：45%；
}
.4{
高度：200px；
背景：#777；
宽度：55%；
溢出：自动；
}

三
一
二
四

我会这样做：

分成两个不同的分区：

<div class="wrapper">
    <div class="wrapper_left">
        <div class="three">three</div>
  </div>
  <div class="wrapper_right">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="four">four</div>
  </div>
</div>

三
一
二
四

我知道您提到HTML无法更改，因为您仍然需要手机上的#1、#2、#3、#4显示顺序。但实际上，您可以对它们进行重新排序，使其不同于原始标记（尽管在DOM中视觉上不存在）。因此，我建议在标记中使用#3、#1、#2、#4顺序来实现这种布局，因为您还注释了#3是固定宽度。以下是仅使用CSS float+flexbox+媒体查询的方法

div{
边框：1px纯红；
}
.包装纸{
显示器：flex；
弯曲方向：立柱；
}
.1{顺序：1；}
.two{顺序：2；}
.3{顺序：3；}
.4{顺序：4；}
@介质（最小宽度：768px）{
.包装纸{
显示：块；
}
.包装工：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.三{
浮动：左；
宽度：200px；
}
.1，
.2，
.4{
左边距：200px；
}
}

三
一
二
四

您是否尝试设置块格式上下文？然后我怀疑你运气不好……正如你所发现的。IE10确实支持自己版本的grid，虽然没有那么好，但它可能仍然适用于你的目的：寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为，一个特定的问题或错误，以及在问题本身中重现它所需的最短代码。请参阅：@贴纸-是的，宽度是固定的。谢谢您的回答。包装高度必须相对于子级。相对-动态/由内容决定是什么意思？包装高度不能固定。它的高度取决于孩子们。如果它可以有一个固定的高度，我可以使用position:absolute。你可以使用jQuery吗？请注意：我现在根据你的flexbox方法将答案更改为基于jQuery的解决方案。我无法修改html。原因是在移动设备上，每个元素都应该按顺序出现，即一、二、三、四。您可以使用

位置：fixed？
位置：固定的
或
位置：绝对的
将使元素脱离流，即包装器不会包裹它。我在问题中解释得更多。如果你认为你可以让它工作，请随意提供一个例子。我无法修改HTML代码。原因是在移动设备上，div应该按顺序出现。为了清楚起见，我会更新这个问题。这是一个很好的观点。我可以使用flex-order对mobile-view上的元素重新排序。这是另一个例子，是的，基本上是一样的，但浮动到另一边。我意识到这并不能直接解决CSS问题，但它提供了一个有效的解决方案。出于这个原因，我将此标记为已接受的答案。你可以悬赏，看看是否还需要更好的解决方案。