Jump to content
  • 0

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


chiffenok
 Share

Question

Добрый день. Есть карточка товара. Подскажите как ее сверстать ее, так что бы когда изображение отсутсвует часть с описанием сдвигалась влево.

3012423m.jpg

на данный момент у меня сверствано float и картинке задана ширина если ее нету то ширина = 0 и соответствено описание сдвигается влево, но тут возникает проблема когда описание больше по высоте чем картинка то текст попадать под картинку , таковы уж правила работы float

Верстать не нужно подскажите в каком направлении двигатся, может ссылку а то у меня ни чего не получилось найти

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

Форма строится динамически ведь, и адрес картинки получается из пхп. если да, то можно проверять установлена ли переменная с адресом рисунка - и соответственно отображать блок с изображением или нет.

Link to comment
Share on other sites

  • 0

Форма строится динамически ведь, и адрес картинки получается из пхп. если да, то можно проверять установлена ли переменная с адресом рисунка - и соответственно отображать блок с изображением или нет.

не мне нужно без сриптов, чистым css, забыла написать, человек утверждает что можно сделать на css

Link to comment
Share on other sites

  • 0

но тут возникает проблема когда описание больше по высоте чем картинка то текст попадать под картинку , таковы уж правила работы float

margin-left или overflow.

У обоих способов есть свои минусы.

Ну а вообще не плохо бы код показывать, когда вопрос задаёшь. Очень желательно ссылкой или на тестовую страницу или на демо-пример на http://jsfiddle.net/

  • Like 1
Link to comment
Share on other sites

  • 0

Извините, а вот этот приём не подойдёт?

не совсем понимаю чем он мне может помочь, мне нельзя оборачивающему блоку задавать какую то ширину и делать его display block тогда он будет 100% ширины занимать

вот верстка http://jsfiddle.net/dUjfB/ не знаю скоко из нее щяс видно так как текст занимает опред пространство и нету картинок

Link to comment
Share on other sites

  • 0

То есть нужно, чтобы описание сдвигалось влево, когда картинки нету, а когда есть - чтобы оно не выпадало влево под картинкой?

Если я правильно понял, то вот решение - http://jsfiddle.net/dUjfB/1/

Только одно условие - когда нету картинки, то и блока .b-product-card__wrap-img1 быть не должно.

  • Like 1
Link to comment
Share on other sites

  • 0

То есть нужно, чтобы описание сдвигалось влево, когда картинки нету, а когда есть - чтобы оно не выпадало влево под картинкой?

Если я правильно понял, то вот решение - http://jsfiddle.net/dUjfB/1/

Только одно условие - когда нету картинки, то и блока .b-product-card__wrap-img1 быть не должно.

спасибо возьму на вооружение ваш метод, но условие помоему не очень выполнимо в условиях cms

но я уже сделала другим методом http://cssing.org.ua/2005/07/03/display-table/, как раз хотела отписатся, правда у него тоже есть свои издержки - блок с ценой не липнет к правому краю если картинки нету

потому что оборачивающий тег с display table не занимает 100%, может кто ни будь знает как решить такую проблему?

http://jsfiddle.net/QAT3D/

Link to comment
Share on other sites

  • 0

psywalker вам предложил этот метод в пятом посте темы, там же описывается решение проблемы растягивания блока на 100%.

спасибо, да теперь поняла изначально прочитала и не врубилась, поэтому и задала вопрос но никто не ответил и пошла дальше искать решение

теперь все отлично работает

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • 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