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

Question

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

其他因素

列的宽度不相等。
不能使用 position: absolute，因为子项的高度未知，并且包装器保持相对于高度很重要。
无法使用 display: grid，因为代码需要支持 IE10。
我无法对 HTML 中的元素重新排序。但是，我可以在某些元素周围包含各种包装器，只要它们是有序的。原因是因为元素 1、2、3 和 4 应该按顺序显示在移动设备上，即响应。

到目前为止我尝试了什么

使用浮点数 Right/Left - https://jsfiddle.net/s4542jz2/2/
使用浮点数 Right/None - https://jsfiddle.net/zfLspshq/2/
使用内联块 - https://jsfiddle.net/kq8dbn5s/2/
使用 Flexbox - https://jsfiddle.net/g3wwdw84/6/

更新

我已将问题更新为无法重新订购 HTML。

Answer 1

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

注意：现在左栏更高。如果将 .tree 的高度更改为小于 600px，您会看到包装器获得了右列的高度。

$(document).ready(function() {
var heightthree = $('.three').outerHeight();
var heightone = $('.one').outerHeight();
var heighttwo = $('.two').outerHeight();
var heightfour = $('.four').outerHeight();
var heightright = heightone + heighttwo + heightfour;
  if (heightthree > heightright) {
    $('.wrapper').css('height', heightthree)
  } else {
    $('.wrapper').css('height', heightright)
  }
})

html, body {
  margin: 0;
}
.wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  background: #fa0;
}

.one {
  order: 2;
  height: 200px;
  background: #999;
  width: 55%;
}

.two {
  order: 3;
  height: 200px;
  background: #888;
  width: 55%;
}

.three {
  order: 1;
  height: 620px;
  background: black;
  width: 45%;
  color: white;
}

.four {
  order: 4;
  height: 200px;
  background: #777;
  width: 55%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
  <div class="four">four</div>
</div>

这里是左栏比右栏低的版本：https://jsfiddle.net/8m2cjb6r/21/

Answer 2

这是您要找的东西吗？

.wrapper {
  width: 100%;
  color: white;
}

.one {
  height: 200px;
  background: #999;
  width: 55%;
    overflow: auto;
}

.two {
  height: 200px;
  background: #888;
  width: 55%;
  overflow: auto;
}

.three {
  float: left;
  height: 600px;
  background: black;
  width: 45%;
}

.four {
  height: 200px;
  background: #777;
  width: 55%;
  overflow: auto;
}

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

Answer 3

我会做这样的事情：

https://jsfiddle.net/s4542jz2/13/

分成两个不同的 div :

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

Answer 4

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

jsFiddle

div {
  border: 1px solid pink;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.one   { order: 1; }
.two   { order: 2; }
.three { order: 3; }
.four  { order: 4; }

@media (min-width: 768px) {
  .wrapper {
    display: block;
  }
  .wrapper:after {
    content: "";
    display: table;
    clear: both;
  }
  .three {
    float: left;
    width: 200px;
  }
  .one,
  .two,
  .four {
    margin-left: 200px;
  }
}

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

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

How can I float the third element to the left?

css

css-float

flexbox

其他因素

到目前为止我尝试了什么

更新