Прокрутка изображений с подписями

Я разрабатываю веб-сайт, на котором используются прокручивающие полосы полосы, содержащие изображения с описанием рядом с изображением.Прокрутка изображений с подписями

+----------------------------------+ +----------------------------------+ 
|+--------+ Title    | |+--------+ Title    | 
|| Image | Description...  | || Image | Description...  | 
||  |      | ||  |      | 
|+--------+      | |+--------+      | 
+----------------------------------+ +----------------------------------+

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

<style type="text/css"> 
    .container { 
     width: 1000px; 
     height: 250px; 
     overflow: hidden; 
    } 
    .scrolling { 
     white-space: nowrap; 
    } 
    .cell { 
     display: inline; 
     height: 250px; 
     width: 500px; 
    } 
</style> 
<html> 
    <body> 
     <!-- The following approach sort of works but is all in a line --> 
     <div class="container"> 
      <div class="scrolling"> 
       <div class="cell"> 
        <img src="/static/pic1.jpg" height="200" /> 
        title1 description1 
       </div> 
       <div class="cell"> 
        <img src="/static/pic2.jpg" height="200" /> 
        title2 description2 
       </div> 
       <!-- etcetera --> 
      </div> 
     </div> 
    <body/> 
</html>

Я пытался использовать поплавок в CSS, но любое использование его приводит к нежелательному обертывание .cell дивы в .scrolling дел. Каков наилучший подход к созданию этого эффекта?

источник

2012-04-12 richard

вы также попробовать 'дисплей: инлайн-block' вместо' дисплея: inline' ? – fcalderan

Отлично, это сделал трюк! Вы хотите написать ответ? – richard

попробовать display: inline-block вместо display: inline

забудьте также установить отрицательное письмо-интервал и словесного интервал

.scrolling { 
    white-space: nowrap; 
    word-spacing: -3px; 
    letter-spacing: -3px; 
} 
.cell { 
    display: inline-block; 
    word-spacing: normal; 
    letter-spacing: normal; 
    white-space : normal; 

    height: 250px; 
    width: 500px; 
}

источник

2012-04-12 08:48:18 fcalderan

Прокрутка изображений с подписями

ответ

Смежные вопросы