Проблема верстки

[XopicT]

Такая проблема. Есть 4 картинки. Они должны быть позиционированы по центру, возле первой картинки слева есть текст, возле второй картинки текст справа. возле третей текст слева, возле четвертой справа. Я уже замучался, не могу понять как это сделать....Буду рад помощи. :0074:

[mrnobody]

У меня получилось практически как у Tilonorrinco

 

[AlexZaw]

возможно flexbox и nth-child вам поможет, хотя если бы был код помочь было бы проще  

[XopicT]

вот так выглядит сайт. не получается предпоследняя секция в которой в столбец картинки 

index.html

main.css

[Tilonorrinco]

http://jsbin.com/wiriwi/edit?html,css,output

Edited October 6, 2017 by Tilonorrinco
исправил быдлокод

[XopicT]

А в чем заключается быдлокод? Я учусь сам, по этому мне нужно знать что я делаю не так

31 минуту назад, Tilonorrinco сказал:

http://jsbin.com/wiriwi/edit?html,css,output

 

Edited October 6, 2017 by XopicT

[Tilonorrinco]

Цитата

А в чем заключается быдлокод? 

Хорист, Вы меня неправильно поняли.

"Исправил быдлокод" -- это комментарий к моему отредактированному сообщению (причина редактирования). Тот код, который я выложил в песочницу изначально был недостаточно хорош, я исправил его и в сообщении указал новую ссылку. Надеюсь, никто не увидел первую версию

Edited October 6, 2017 by Tilonorrinco

[XopicT]

Tilomorrinco, в первый раз у меня не открылось) спасибо большое!!! 

mrnobody, и Вам спасибо! Но так и у меня получилось, а у Tilomorrincо получилось то что нужно))

[mrnobody]

1 час назад, XopicT сказал:

mrnobody, и Вам спасибо! Но так и у меня получилось

А вы наверное не нажимали "Edit on Codepen" в верхнем правом углу после запуска пена.

[Hasiev]

У @mrnobody даже с учетом адаптивности сделано ..

[XopicT]

13 часа назад, mrnobody сказал:

А вы наверное не нажимали "Edit on Codepen" в верхнем правом углу после запуска пена.

Точно)не нажал)))теперь увидел!спасибо большое)

[alanreid]

 

[XopicT]

В общем я не совсем понял все ответы, в силу неопытности...) 2 дня думал как это сделать теми знаниями, которым владею. В общем решил сделать в виде таблицы.вроде бы получилось так как нужно) 

Оцените, пожалуйста. Правильно это или нет. 

index.html

main.css

Edited October 8, 2017 by XopicT

[Tilonorrinco]

Хорист, из всех возможных вариантов сверстать этот блок вы выбрали почти самый плохой  

Хуже только абсолютное позиционирование.

Решение, которое вы выбрали плохое, потому что:

1) не семантичное: данные, которые вы размечаете не являются табличными

2) смешивается структура и оформление

3) создаются лишние элементы в разметке (куча ненужных оберток, пустой столбец, который нужен лишь для создания отступа)

Конечно, при желании можно заменить табличные тэги на дивы, прописать им display:table/table-cell etc, чтобы нивелировать эти минусы, но зачем это делать, когда есть стандартные решения? (float, flexbox, inline-block).

Ваше решение является нормальным в двух случаях:

1) на дворе -- начало нулевых и все строят сетки на таблицах

2) вы верстаете html-письма (тут, я, правда, не совсем уверен, никогда их не верстал)

 

Edited October 8, 2017 by Tilonorrinco

[XopicT]

Tilonorrinco, я понял что нужно делать через flex-box и float. Но что не предпринимал, опять же из-за неумения, все выходило не так как нужно. А тот вариант который Вы мне прислали, я даже попробовал просто скопировать, и вставить.но когда вставил вместо дива картинку, то получилось как попало... Не знаю в чем дело

[Highlander]

2 часа назад, XopicT сказал:

Tilonorrinco, я понял что нужно делать через flex-box и float. Но что не предпринимал, опять же из-за неумения, все выходило не так как нужно. А тот вариант который Вы мне прислали, я даже попробовал просто скопировать, и вставить.но когда вставил вместо дива картинку, то получилось как попало... Не знаю в чем дело

вам же уже дали код готовый в code pene, разберите его и скопируйте с редактированием под себя

[XopicT]

Всем большое спасибо за ответы! Буду разбираться)