Почему div не может «плавать»?

Question

Я очень смущаюсь о поплавке. .two должен быть справа от .one но .two чуть ниже .one

div { 
 
    width: 100px; 
 
    background: #FF9; 
 
} 
 
; 
 
.theone { 
 
    float: left; 
 
    font-size: 20px; 
 
}

<div class="theone">one</div> 
 
<div class="theright">two</div>

Answer 1

 .theright { 
    float: left; 
    font-size: 20px; 
} 

добавить, что, если Вы хотите 2 дивы быть рядом с Афоризм это лучше всего, чтобы они оба плавали вправо. дополнительно вы можете заменить .theone .theone, .test

Answer 2

в div css добавить дисплей: встроенный блок;

div{ 
     display: inline-block; 
    } 

Answer 3

По умолчанию значение div имеет значение отображения, равное «block», что означает, что они «начинаются со следующей строки». Если вы добавили отображение: свойство inline-block для всех div, то вы можете добавить float: left для любого div, чтобы сделать его первым.

Answer 4

div { 
 
    width: 100px; 
 
    background: #FF9; 
 
display: inline-block; 
 
} 
 
; 
 
.theone { 
 
    float: left; 
 
    font-size: 20px; 
 
}

<div class="theone">one</div> 
 
<div class="theright">two</div>

Answer 5

ДИВ имеет display: block по умолчанию.

Возможно, вы захотите установить другой тип отображения в свои div.

div {ширина: 100px; фон: # FF9; display: inline; }

.theone {float: left; размер шрифта: 20 пикселей; }

See jsFiddle

Answer 6

Я попытаюсь сделать и объяснил Детальный ответ. Плавающий элемент плавает из своего исходного положения в потоке. В принципе, плавающий эффект влияет только на объявленные элементы после в структуре HTML.

В вашем случае правый-плавающий элемент объявляется после неплавающего. Так что нормально theright появляется ниже theone, и вы не видите плавающий эффект.

Чтобы сделать элемент плавающим справа от другого, вы должны объявить его до этот другой. Как это:

<div class="theright">two</div> 
<div class="theone">one</div> 
<style> 
    .theright { 
     float: right; 
    } 
</style> 

Обратите внимание, что для этой работы, theright элемент должен быть больше, чем theone. В противном случае theone полностью замаскирует theright, выталкивая его содержимое из коробки. Это происходит потому, что плавающий элемент выходит из потока и парит над другими элементами, содержимое которых «избегает» плавающих блоков.

Есть много других способов получить тот же результат с другим Approch:

• сделать theone поплавок налево вместо (оставляя theright в качестве основного элемента блока)
• сделать оба элемента инлайн-блоки и дайте им соответствующую ширину
• для двух элементов, это необязательно, но если вам нужно 3 или более элемента рядом, вы можете заставить их все поплавать слева (или справа объявить их в обратном порядке, в зависимости от конечной компоновки, которую вы хотите)
• и т. Д.