我怎样才能将两个div（左下）和两个div（右下）相互浮动

I'm trying this:

我正在尝试这个:

DIV 1    DIV 3
DIV 2    DIV 4

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

I'm trying to use clear:both but it makes a top margin..

我试图使用清楚:两者但它是一个上限。

Use other divs to float left 1 and 2 and float right 3 and 4 is not an option in this case..

在这种情况下,使用其他div向左浮动1和2并向右浮动3和4不是一个选项。

Here is my css:

这是我的css:

.div1 {
  height:69px;
  float:left;
  width:48%;
  clear:both;
  background:pink;
}

.div2 {
  height:200px;
  margin-top:10px;
  display:block;
  float:left;
  width:48%;
  clear:both;
  background:lightblue;
}

.div3 {
  height:69px;
  line-height:30px;
  float:right;
  width:48%;
  background:red;
}

.div4 {
  height:200px;
  float:right;
  width:48%;
  background:yellow;
  clear:both;
}

5 个解决方案

#1

Try changing the order of the HTML and change the clear of the divs.

尝试更改HTML的顺序并更改div的清除。

<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
<div class="div4"></div>

And CSS

.div1 {
  height:69px;
  float:left;
  width:48%;
  background:pink;
  clear:left;
}

.div2 {
  height:200px;
  margin-top:10px;
  display:block;
  float:left;
  width:48%;
  background:lightblue;
  clear:left;
}

.div3 {
  height:69px;
  line-height:30px;
  float:right;
  width:48%;
  background:red;
  clear:right
}

.div4 {
  height:200px;
  float:right;
  width:48%;
  background:yellow;
  clear:right
}

JSFiddle: https://jsfiddle.net/6ywja6dn/

#2

Can you reorder the divs you've got? If so, then you could replace the "display:block", "float" and "clear" style rules with "display:inline-block" (for all four divs).

你可以重新订购你得到的div吗?如果是这样,那么你可以用“display:inline-block”替换“display:block”,“float”和“clear”样式规则(对于所有四个div)。

Then you'd have to reorder the divs as (1, 3, 2, 4) to match your original layout.

然后你必须将div重新排序为(1,3,2,4)以匹配原始布局。

#3

I have wrapped the divs in left and right in another div called "wrap1". Here is the fiddle. https://jsfiddle.net/4j4jasgn/1/ or you have to change the order of the div like - div1,div3,div2,div4

我已经在另一个名为“wrap1”的div中左右包装了div。这是小提琴。 https://jsfiddle.net/4j4jasgn/1/或者你必须改变div的顺序 - div1,div3,div2,div4

<div class="wrap1">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
<div class="wrap1">
<div class="div3">3</div>
<div class="div4">4</div>
</div>

#4

<style type="text/css">
  .left-block{
    float: left;
    clear:left;
    width: 50%;
  }
  .right-block{
      margin-left: 50%;
  }
</style>    
<div class="div1 left-block">Div 1 with float left</div>
<div class="div2 left-block">Div 2 with float left</div>
<div class="div3 right-block">Div 3 No float</div>
<div class="div4 right-block">Div 4 No float</div>

#5

The answers above are not in line with what TO wants. He says he can't change the order of the divs.

上面的答案与想要的不符。他说他不能改变div的顺序。

As div's are floated in relation the the closest floating element, it is not possible to float div 3 next to div 1.

由于div与最近的浮动元素相关,因此不可能将div 3放在div 1旁边。

The solution is to give div 1 a float left, div 2 a float left, div 3 a position absolute, and div 4 a float right. This is also a responsive solution, as div's 3 and 4 will position themselves under div 1 and 2.

解决方案是给div 1一个浮动左边,div 2一个浮动左边,div 3一个绝对位置,div 4一个浮动右边。这也是一个响应式解决方案,因为div 3和4将自己定位在div 1和2之下。

See this example, move the vertical center line to make the screen smaller and see the div's lining up below each other.

请参阅此示例,移动垂直中心线以使屏幕变小,并看到div在彼此下方排列。

https://jsfiddle.net/6ywja6dn/2/

.div.one { float: left; background: blue; }
.div.two { float: left; clear: left; background: red; }
.div.three { position: absolute; top: 0px; left: 52%; background: purple; }
.div.four { float: right; background: green; }

@media (max-width: 600px) {
.div.one { }
.div.two { }
.div.three { position: static; float: left; clear: left; }
.div.four { float: left; clear: left;  }
}

#1