Jump to content

Webast

Neophyte
  • Posts

    1
  • Joined

  • Last visited

Information

  • Sex
    мужской
  • From
    МОсква

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Webast's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Здравствуйте. Подскажите пожалуйста кто знает, как с помощью css реализовать следующее. У меня на сайте в шапке сделана такая конструкция: 1-я картинка, а справа от нее в столбик 3 слова. 2-я картинка, а справа от нее в столбик 3 слова. 3-я картинка, а справа от нее в столбик 3 слова. Все эти 3 картинки со словами выстроены в строчку, т.е. если разрешение экрана позволяет, то они располагаются на одном уровне. Если разрешение экрана меньше (например, на смартфоне), то слова в столбике могут располагаться ниже картинки, а не справа от нее. Хотя места справа вроде бы достаточно. Получается не очень красиво. Код HTML: <div id="header_image"><img src="/image-1.png" /></div> <div id="header_text">Текст в столбик 1 <p>Текст в столбик 2</p> <p>Текст в столбик 3</p> </div> <div id="header_image"><img src="/image-2.png" /></div> <div id="header_text">Текст в столбик 1 <p>Текст в столбик 2</p> <p>Текст в столбик 3</p> </div> <div id="header_image"><img src="/image-3.png" /></div> <div id="header_text">Текст в столбик 1 <p>Текст в столбик 2</p> <p>Текст в столбик 3</p> </div> Код CSS: div#header_image { float: left; padding: 20px 10px 0px 0px; display: inline; } div#header_text { float: left; padding: 20px 30px 0px 0px; display: inline; } Конечно, все три картинки со словами в столбик уместить на одном уровне в строчку не получится при определенном разрешении, да и не надо это. Главное чтобы каждая картинка с ее тремя словами в столбике всегда были на одном уровне в строчку. А вторая картинка с ее тремя словами в столбик ниже, 3-я ниже 2-й... Посоветуйте что можно в это случае сделать при помощи css? Может достаточно какие-нибудь стили прописать в приведенный код для div header_image и div header_text?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy