Почему в блоке элементы становятся в столб, а не идут строкой?

Question

[Ingernirated]

Подзабыл, подскажите пожалуйста, как упорядочить элементы по горизонтали, а не что бы они вертикально шли?
https://jsfiddle.net/td81zapz/

Answer 1

[iBird Rose]

https://jsfiddle.net/td81zapz/1/
float: left; забыл?

Comments

[Ingernirated]

нужно тоже самое, только что бы оно задавалось не всем , а классу
он режет ширину
https://jsfiddle.net/td81zapz/2/

[iBird Rose]

Ingernirated: ну тк поставь класс и задай

[Ingernirated]

iBird Rose: поставил и задал, пример кинул, ширина элемента урезана в итоге

[iBird Rose]

Ingernirated: ты задал ему 15% - он и занимает 15%

[iBird Rose]

Ingernirated: если ты про .nameWork, то ты забыл ему задать float: left; поэтому ширина у него начинается с начала родителя а не после .nameTop

[Ingernirated]

iBird Rose: а как третий элемент растянуть по такому же принципу, чтобы в итоге все 3 элемента заняли 100% блока?
При 60% и float:left он выдавливается из блока, а при 59% он не достает до края.
(15+ 25 + 60...)

[iBird Rose]

Ingernirated: ну тк задай для последнего элемента width: 40%; тобишь 15+45+40 = 100. https://jsfiddle.net/td81zapz/3/

[Ingernirated]

iBird Rose: спасибо

Answer 2

[Grayni Web]

Добавь нужным блокам display: inline-block;

Answer 3

[Виталий]

Блочные элементы итак 100% width от родителя имеет. Если вам надо обтекание у блочных элементов - используется float.
Если вам надо сделать таблицу - используйте table
Если нам эмитировать таблицу из блоков - используйте display: table-cell
Если вам надо строчные элементы - используйте , span, например

Answer 4

[Сергей Белоусов]

display: flex; задай для .top