Плавающие в CSS - Разрыв / пространство слева вверху, если всплывать вправо

Question

Это немного сложно описать, но в основном на моей странице осталось нежелательное пространство от плавающего элемента div. Вот картинки, описывающие проблему. Черные ящики - это divs.

До плавания:

После плавания:

Желаемый эффект:

И я не уверен, имеет ли это значение, но у меня также есть пустой div с надписью «clear: both» сразу после плавающего div.

Как мне этого добиться?

Answer 1

Если возможно, поместите float: right div перед неоткрытым div в HTML.

Answer 2

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

Удалить очищающий div.Также проверьте отступы / поля для этих элементов и убедитесь, что содержащийся элемент div (родительский элемент div) достаточно широк для размещения двух дочерних элементов div.

Answer 5

Для первого div должно быть установлено float: left. В противном случае первый div, который является блочным элементом, займет для себя все вертикальное пространство.

Answer 6

Есть проблема с пробелами в поплавках. Вот почему вторая коробка немного ниже.

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

будет работать.

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

не будет работать

Answer 7

Если a1 должен отображаться как плавающий справа от a2, тогда вы должны поместить a1 FIRST в html и плавать его вправо. Немного противоинтуитивно, но работает как поплавки.

<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 8

Оба элемента должны плавать влево и убедиться, что они равны или меньше ширины контейнера, в котором они находятся.

Answer 9

Проблема в том, что вы используете только один div. Вам нужно, чтобы поле margin-right для неотмеченного div равнялось общему пространству (ширина + отступ + отступ) плавающего div.

Или поочередно вы можете использовать оба 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>