CSS 从内容内部向左和向右浮动两列

Question

我想要实现的目标如下图所示。注意数字是 HTML 中每个框的顺序。我不想更改顺序，因为它是我希望用于移动 View 的顺序。

框 2 和 3 以及固定宽度和中间的是流动的。我到目前为止所做的可以在 http://codepen.io/anon/pen/wBWPoB 上看到我的问题是使用我的解决方案我必须知道 box1 的高度并且我不想依赖它。 Box1 可以变得更高，然后它会隐藏 box4。

有什么想法吗？

请注意，我也尝试过对 box3 使用 position: absolute，但是当 box3 完全超出布局时，box6 会隐藏它的一部分。

Answer 1

请看下面的输出，我试着让它像你想要的那样

• 从双方的第 1 名和第 6 名中脱颖而出
• 向左浮动第 3、4、5，并使第 3 大于第 4 和第 5
• 将第二个向右浮动

body{
   text-align:center;
   width:100%;
}
div{
width:400px;
  height:100px;
  background:red;
  margin-top:5px;
}
div:nth-child(3){
background:green;
  float:left;
  width:100px;
  height:500px;
}
div:nth-child(2){
background:green;
  float:right;
  width:100px;
  height:500px;
}

div:nth-child(6),div:nth-child(1){
background:yellow;
  clear:both;
 width:100%
  
}
div:nth-child(4),div:nth-child(5){
width:260px;
  float:left;
 margin:5px auto;

  
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>