Float: left, или история о том, как браузеру на это плевать

@Skynexion · Регистрация: 28.09.2015

Author24 — интернет-сервис помощи студентам

Всем доброго времени суток.
Делал шапку. Смысл в чем: есть главный DIV блок, в нем остальное. В главном из свойств только

CSS

1	{ position: relative; left: 16%; width: 68%; height: 400px;}

Надо было сделать 3 кноки в ряд, им было плевать на float: left. Т.е. впринципе, как будто его нет.

CSS

1	{ position: relative; float: left; top: 28px; left: 45%; height: 30px; width: 11%; }

Следующая же строчка (после них) спокойно начала работать с float: left.

CSS

1	{ position: relative; float: left; width: 12.7%; left: 14.5%; height: 64px; top: -12px;}

Далее есть блок с свойствами:

CSS

position: relative; 
left: 4%; 
top: 92px; 
height: 88px; 
width: 94%; 
background:url(img/background-stat.png); 
background-size: 100% 100%;

Внутри него хочу разместить еще 4 блока в строчку.
Свойства блоков:

CSS

position: relative; 
float: left; 
left: 10%; 
top: 4px;
height: 75px; 
width: 20%; 
background-color: #000000;

И они стоят не то, чтобы в линию.... А обратной лесенкой от правого края О_о. И у меня вопрос: почему? Почему коду плевать на float: left в одном месте, и не плевать в точно-таком же месте, но пониже?

@Farrewa · 02.10.2015, 15:39

Сообщение от Skynexion

Надо было сделать 3 кноки в ряд, им было плевать на float: left. Т.е. впринципе, как будто его нет.

Сообщение от Skynexion

left: 45%;

Сообщение от Skynexion

width: 11%;

Это прописано для каждой кнопки?

Добавлено через 8 минут
Ибо если это так, то кнопки в жизни не встанут в ряд!
У тебя, для каждой кнопки отступ слева 45% + 11% ширина кнопки = 56% нужно одной кнопке от экрана, остальным кнопкам просто нет места, так как надо еще 45% уже от первой кнопки отступить, при том что ширина кнопки 11% (56% всего, а в общем уже 112% от ширины страницы! А у нас еще и 3-я кнопка, с ней 168%). Думаю тебе уже понятно о чем я... убери left: 45% и увидишь, что кнопки встали в ряд, если нужен отступ с левого края, то запихни кнопки в отдельный div

HTML5

<div id="btns">
   <button>1</button>
   <button>2</button>
   <button>3</button>
</div>

CSS

#btns{
   margin-left: 45%;
   /*и тут еще лучше задай размер диву*/
}

Добавлено через 5 минут

Сообщение от Skynexion

Далее есть блок с свойствами:

Сообщение от Skynexion

Внутри него хочу разместить еще 4 блока в строчку.
Свойства блоков:

Сообщение от Skynexion

И они стоят не то, чтобы в линию.... А обратной лесенкой от правого края О_о. И у меня вопрос: почему? Почему коду плевать на float: left в одном месте, и не плевать в точно-таком же месте, но пониже?

У этих 4х блоков ширина по 20% и плюс отступ 10% ( 30 * 4 = 120% )

Добавлено через 1 минуту
Вообщем если, я тебя правильно понял, то вот от чего твоя беда, если нет, то опиши подробнее, скинь скришнот или сам html и css документ

	02.10.2015, 15:39

Float: left, или история о том, как браузеру на это плевать

Решение