多个漂浮物具有清晰但正确的漂浮物被左侧向下推(multiple floats with clear, yet right ones are pushed down by left ones)

编程入门行业动态更新时间:2024-10-04 21:23:17

所以我有这个代码：

HTML：

<div class="left">left</div> <div class="left">left</div> <div class="left">left</div> <div class="right">right</div> <div class="right">right</div> <div class="right">right</div>

CSS：

.left{ float: left; clear: left; border: 1px solid blue; } .right{ float: right; clear: right; border: 1px solid red; }

jsfiddle： https ：//jsfiddle.net/839okvsb/4/

左边的div是我期望它们的位置，但是右边的div在div 2之后开始而不是从顶部开始。

为什么会这样，我该如何解决？ 我完全不明白为什么会这样。

PS：我不能将左div包含在一个巨大的div中，我需要将这些div分开（因为有时，div1将是全宽，有时不是）。

编辑：我不能混淆它们，你可以在这里看到： https ： //jsfiddle.net/839okvsb/5/ / mixed仍然无法解决问题。

edit2 ：我不能将它们打包成一个大的div，因为我需要它们才能做到这一点： https ： //jsfiddle.net/839okvsb/8/我需要的时候。

so I have this code:

html:

<div class="left">left</div> <div class="left">left</div> <div class="left">left</div> <div class="right">right</div> <div class="right">right</div> <div class="right">right</div>

css:

.left{ float: left; clear: left; border: 1px solid blue; } .right{ float: right; clear: right; border: 1px solid red; }

jsfiddle: https://jsfiddle.net/839okvsb/4/

Left divs are where I would expect them to be, but right ones start after div 2 instead starting on top.

Why is that, and how can I fix that? I absolutely cannot grasp why is this happening.

PS: I cannot contain left divs into one gigantic div, I need those divs separated (because sometimes, div1 will be full width and sometimes not).

edit: I cannot mix them up and as you can see here: https://jsfiddle.net/839okvsb/5/ / mixing still doesn't solve the issue.

edit2: I cannot pack them in one big div, because I need them to be able to do this: https://jsfiddle.net/839okvsb/8/ when I need to.

最满意答案

由于你不能像左那样使用左/右浮动创建一个2“列”布局（即使你清除它们），你需要得到这样的标记，否则你得到的结果显示在你的问题中，因为那是如何漂浮工作。

.left{
  float: left;
  clear: left;
  border: 1px solid blue;
  width: 48%;
}
.right{
  float: right;
  clear: right;
  width: 48%;
  border: 1px solid red;
} 
  <div class="left">left 1</div>
<div class="right">right 1</div>
<div class="left">left 2</div>
<div class="right">right 2</div>
<div class="left">left 3</div>
<div class="right">right 3</div> 
  
 
 
 或者包裹你的花车  
 
 
  
  .left{
  float: left;
  clear: left;
  width: 48%;
}
.right{
  float: right;
  clear: right;
  width: 48%;
}
.left .left{
  border: 1px solid blue;
  width: 100%;
}
.right .right{
  width: 100%;
  border: 1px solid red;
} 
  <div class="left">
  <div class="left">left 1</div>
  <div class="left">left 2</div>
  <div class="left">left 3</div>
</div>

<div class="right">
  <div class="right">right 1</div>
  <div class="right">right 2</div>
  <div class="right">right 3</div>
</div> 
  
 
 
 根据编辑/评论更新  
 如果左边和右边并不总是左右，例如当其中一个是100％宽时，这是另一个选项，其中所有都是左边浮动  
 
 
  
  .left, 
.right {
  float: left;
  border: 1px solid blue;
  box-sizing: border-box;
  width: 48%;
  margin-left: 4%;
}
.left:nth-child(1) {
  width: 100%;
  margin-left: 0;
}
.right {
  margin-left: 0;
}
.right{
  border: 1px solid red;
} 
  <div class="left">left 1</div>
<div class="right">right 1</div>
<div class="left">left 2</div>
<div class="right">right 2</div>
<div class="left">left 3</div>
<div class="right">right 3</div> 
  
 
Since you can't create a 2 "column" layout using float left/right like that (even if you clear them), you need to have your markup like this, or else you get the result showed in your question, as that is how floats work. 
 
 
  
  .left{
  float: left;
  clear: left;
  border: 1px solid blue;
  width: 48%;
}
.right{
  float: right;
  clear: right;
  width: 48%;
  border: 1px solid red;
} 
  <div class="left">left 1</div>
<div class="right">right 1</div>
<div class="left">left 2</div>
<div class="right">right 2</div>
<div class="left">left 3</div>
<div class="right">right 3</div> 
  
 
 
Or wrap your floats 
 
 
  
  .left{
  float: left;
  clear: left;
  width: 48%;
}
.right{
  float: right;
  clear: right;
  width: 48%;
}
.left .left{
  border: 1px solid blue;
  width: 100%;
}
.right .right{
  width: 100%;
  border: 1px solid red;
} 
  <div class="left">
  <div class="left">left 1</div>
  <div class="left">left 2</div>
  <div class="left">left 3</div>
</div>

<div class="right">
  <div class="right">right 1</div>
  <div class="right">right 2</div>
  <div class="right">right 3</div>
</div> 
  
 
 
Update based on edit/comment 
If the left's and right's doesn't always be left and right, for example when one of them is 100% wide, here is another option, where all is floated left 
 
 
  
  .left, 
.right {
  float: left;
  border: 1px solid blue;
  box-sizing: border-box;
  width: 48%;
  margin-left: 4%;
}
.left:nth-child(1) {
  width: 100%;
  margin-left: 0;
}
.right {
  margin-left: 0;
}
.right{
  border: 1px solid red;
} 
  <div class="left">left 1</div>
<div class="right">right 1</div>
<div class="left">left 2</div>
<div class="right">right 2</div>
<div class="left">left 3</div>
<div class="right">right 3</div>