Float: оставил проблемы при использовании DIVs?

Question

У меня проблемы с выравниванием двух делений бок о бок, как 2 столбца в таблице? Иногда они выровнены правильно, но иногда Div справа появляется под левым Div, если я обновляю страницу, Div возвращается на прежнее место

Как я могу настроить их так, чтобы div ВСЕГДА появлялись рядом?

Спасибо

Answer 1

При создании плавающих элементов div важно установить атрибуты "float" и "width".

<div style="float:left;width:100px">Left Div</div>
<div style="float:left;width:100px">Middle Div</div>
<div style="float:left;width:100px">Right Div</div>
<div style="clear:both;">Bottom Div</div>

Будет генерировать:

==============================================
|  Left Div   |  Middle Div   |  Right Div   |
|             |               |              |
|             |               |              |
|             |               |              |
|             |               |              |
==============================================
|                 Bottom Div                 |
==============================================

Если вы измените размер своего браузера на меньшее окно, div будет перенесен. Это поведение по умолчанию.

Answer 2

Я рекомендую вам прочитать эти две замечательные статьи на alistapart.com

CSS Swag: списки из нескольких столбцов

Искусственное абсолютное позиционирование

Они действительно помогают понять свойство 'float'.

Answer 3

Если div слишком широки, чтобы поместиться в одну строку, они не будут. Поэтому, если вы используете значения пикселей, а экран недостаточно широк, он не будет работать. НО, если вы используете относительную ширину, например, 47% друг для друга, вы можете быть уверены, что они всегда будут иметь правильный размер, чтобы соответствовать друг другу, так как они будут уменьшаться, когда окно делает. Теперь они могут выглядеть немного странно, если они оба шириной 20 пикселей, но это гарантирует, что они всегда рядом друг с другом. : D

Answer 4

проблема в ширине, когда 2 деления с плавающим слева встречаются с узким родителем, тогда по спецификации CSS крайняя справа ставится ниже.

Answer 5

Было бы лучше принять это поведение, так как вы не можете контролировать размер экрана, который будут использовать ваши посетители - это позволяет изящно ухудшить ваш макет для таких устройств, как мобильные телефоны и т. Д.

Answer 6

Читать о коробочной модели

Как правило, у вас будут проблемы из-за заполнения внутри вашего div, изменяющего ширину. Если div становится слишком широким, чтобы поместиться в пространстве, он будет сидеть ниже остальных.

Например, если у вас есть два div с шириной 200px.

Если вы установите отступ в 5 пикселей в одном из них, фактическая ширина будет 210 пикселей (в зависимости от браузера).

Но на это может быть несколько причин.