PomoRde.NET

Официальный сайт

Веб-мастерам

Как сделать через CSS красивое выравнивание картинки в тексте новости

23 сентябрь, 2014 0
Как сделать через CSS красивое выравнивание картинки в тексте новости

Ну вот постоянно смотришь на сайты и думаешь как это они делают. Как они красиво выравнивают картинки. Делается все элементарно через CSS. В общем что долго тянуть... В общем все делает легко и просто.

Берем и добавляем в свой файл CSS следующий фрагмент кода:

.text_of_new img{float:left; margin-right:10px; width: 120px;}
.text_of_new{ overflow: hidden; margin: 0 0px; padding:0px;}


После этого добавляем в шаблон вашего сайта следующий див

<div class="text_of_new">Картинка + полный текст вашей новости</div>


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

Как сделать через CSS красивое выравнивание картинки в тексте новости


Пробуйте.
Прокомментировать
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Введите код с картинки:*
Кликните на изображение чтобы обновить код, если он неразборчив