CSS中的浮动 - 浮动到右边时，空隙/空间留在顶部？

Question

这有点难以描述，但基本上我的页面上浮动的div留下了不受欢迎的空间。这是描述问题的图片。黑匣子是div。

浮动之前：

浮动后：

期望效果：

而且我不确定它是否有所作为，但我也有一个空的div，其中“clear：both”立即放在浮动的div之后。

我怎样才能做到这一点？

Answer 1

如果可能，请将float: right div放在HTML中未展开的div之前。

Answer 2

删除清除div。还要检查这些div上的填充/边距，并确保包含div（父div）的宽度足以容纳两个子div。

Answer 3

<div class="a1">a1</div>
<div class="a2">a2</div>

.a1
{
 background-color:Red;
  width:200px;
  height:200px;
float:left; 
}
.a2
{
  background-color:Green;
  width:200px;
  height:200px;
  float:left;
}

=======试试这个

Answer 4

HTML
<div id="container">
   <div id="main">
     blah blah blah blah blah
   </div>
   <div id="aside">
   this goes to the side
   </div>
   <div id="clear"></div>
</div>

CSS
div#container
{
    width : 80%;//your preference
    height : auto;
    margin : 0 auto;//Centers the page
}

div#main
{
    width : 70%;
    height : auto;
    display : block;//to wrap it up inside its width
    float : left;//float it towards left
}

div#aside
{
    width : 30%;//take up rest of the width size
    height : auto;
    display : block;
    float :right;//float towards right
}

#clear
{
    clear : both;//this will do the job
}

Answer 5

第一个div应设置float: left。否则，第一个div（块元素）将占用所有垂直空间。

Answer 6

问题是你只浮动一个div。您需要使非foated div上的margin-right与浮动div的总空间（width + paddding + margin）的宽度相同。

或者替代地，你可以漂浮两个div。

示例：

<div id="container" style="width: 410px;">
<div style="float: right; width: 200px;">
  <p> Right div</p>
</div>
<div style="width: 200px; margin-right: 210px;">
  <p> Left Div</p>
</div>
<div style="clear:both;"></div>
</div>

OR：

<div id="container" style="width: 410px;">

<div style="float: left; width: 200px; margin-right: 10px;">
  <p> Left Div</p>
</div>
<div style="float: left; width: 200px;">
  <p> Right div</p>
</div>
<div style="clear:both;"></div>
</div>

Answer 7

两个div应向左浮动，并确保它们等于或小于它们所在容器的宽度。

Answer 8

如果a1要浮动到a2的右边，那么你必须在html中放置a1 FIRST，并将其向右浮动。有点反直觉，但它的浮动效果如何。

<div class="container">
  <div class="a1">a1</div>
  <div class="a2">a2</div>
</div>
<style>
div
{
  border: solid 2px #000;
  background-color: #eee;
}
.a1
{
 background-color:Red;
  width:200px;
  height:200px;
float:right; /* the trick is, a1 appears BEFORE a2 in the html, yet
we are floating a1 right .  if you do it the other way around
( try and float a2 ) then it will work like you showed
(separate line)*/
}
.a2
{
  background-color:Green;
  width:200px;
  height:200px;
  /* don't float this one */

}
</style>

Answer 9

漂浮物存在空白问题。这就是第二个盒子略低的原因。

<div style="float:left">a1</div><div style="float:left">a2</div>

会奏效。

<div style="float:left">a1</div>
<div style="float:left">a2</div> 

不起作用