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

Question

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

其他因素

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

到目前为止我尝试了什么

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

更新

• 我已更新问题，说我无法重新排序HTML。

Answer 1

我知道您提到HTML无法更改，因为您仍然需要移动设备上的＃1，＃2，＃3，＃4显示顺序。但实际上你可以将它们重新排序为与原始标记不同（虽然在视觉上不在DOM中）。因此，我建议在标记中使用＃3，＃1，＃2，＃4顺序使这种布局成为可能，因为你还评论＃3是固定宽度。这是使用CSS float + flexbox + media查询的方法。

<强> jsFiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

注意：现在左栏更高。如果将.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 3

这是你要找的东西吗？

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

我会做这样的事情：

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>