Предотвращение содержимого div для обертывания

Мне нужно разработать простой элемент управления изображением с основным большим изображением и миниатюрным облаком, расположенным внизу. Вот мой кодПредотвращение содержимого div для обертывания

.frame{ 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 

 
.image{ 
 
    height: 75%; 
 
    width: 100%; 
 
    
 
    background: red; 
 
} 
 

 
.thumbs{ 
 
    height: 25%; 
 
    width: 100%; 
 
    
 
    background: blue; 
 
} 
 

 
.nav{ 
 
    height: 100%; 
 
    width: 5%; 
 
    display: inline-block; 
 
     
 
    background: green; 
 
} 
 

 
.left{ 
 
    float: left;  
 
} 
 

 
.right{ 
 
    float: right;  
 
} 
 

 
.thumb-images{ 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    width: 90%; 
 
    height: 100%; 
 
    
 
    background: orange; 
 
} 
 

 
.thumb{ 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    
 
    background: purple; 
 
}

<div class='frame'> 
 
    <div class='image'></div> 
 
    <div class='thumbs'> 
 
     <div class='nav left'></div> 
 
     <div class='thumb-images'> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
     </div> 
 
     <div class='nav right'></div> 
 
    </div> 
 
</div>

мне нужно накатанной изображения содержимого области (оранжевый), чтобы скрыть его переполнения (фиолетовый прямоугольник представляют собой изображения). Мне также нужен горизонтальный свиток. Что не так с моей разметкой?

источник

2015-10-20 Sergey

Я не уверен, что вопрос, который вы спрашиваете это. – Jesse

ваши изображения составляют 25%, а ваш фон - 90% (90- (25x3) = 15), что вы хотите делать с оставшимися 15%? скрыть? показать его по сторонам? – ochi

Я не уверен (ваш вопрос не слишком ясен), но я думаю, что ответ может заключаться в том, что вам нужно white-space:nowrap на большом пальце.

.frame{ 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 

 
.image{ 
 
    height: 75%; 
 
    width: 100%; 
 
    
 
    background: red; 
 
} 
 

 
.thumbs{ 
 
    height: 25%; 
 
    width: 100%; 
 
    
 
    background: blue; 
 
} 
 

 
.nav{ 
 
    height: 100%; 
 
    width: 5%; 
 
    display: inline-block; 
 
     
 
    background: green; 
 
} 
 

 
.left{ 
 
    float: left;  
 
} 
 

 
.right{ 
 
    float: right;  
 
} 
 

 
.thumb-images{ 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    width: 90%; 
 
    height: 100%; 
 
    
 
    background: orange; 
 
    white-space:nowrap; /* this */ 
 
} 
 

 
.thumb{ 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    
 
    background: purple; 
 
}

<div class='frame'> 
 
    <div class='image'></div> 
 
    <div class='thumbs'> 
 
     <div class='nav left'></div> 
 
     <div class='thumb-images'> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
      <div class='thumb'></div> 
 
     </div> 
 
     <div class='nav right'></div> 
 
    </div> 
 
</div>

источник

2015-10-20 18:40:45

Я вижу, что вы приняли мой ответ, но @ GrumbleSnatch был лучше, потому что у меня нет горизонтальной полосы прокрутки. –

Изменить класс большого пальца изображения:

.thumb-images{ 
    display: inline-block; 
    overflow-x: scroll; /* causes extra horizontal content to be scrollable */ 
    overflow-y: hidden; /* causes extra vertical content to be cut off */ 
    white-space: nowrap; /* causes everything to stay on one line and not wrap */ 
    width: 90%; 
    height: 100%; 

    background: orange; 
}

в действии here

источник

2015-10-20 18:40:54 Hypaethral

О, это то, чего хотел OP, с полосой прокрутки. Ухоженная. –

Добавление text-align: center; к .thumb-images центров изображений.

Добавление white-space: nowrap помогает сохранить все в одной строке. Добавление различного поведения для overflow-x и overflow-y производит вертикальную прокрутку, смотрите ниже:

.frame { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.image { 
 
    height: 75%; 
 
    width: 100%; 
 
    background: red; 
 
} 
 
.thumbs { 
 
    height: 25%; 
 
    width: 100%; 
 
    background: blue; 
 
} 
 
.nav { 
 
    height: 100%; 
 
    width: 5%; 
 
    display: inline-block; 
 
    background: green; 
 
} 
 
.left { 
 
    float: left; 
 
} 
 
.right { 
 
    float: right; 
 
} 
 
.thumb-images { 
 
    display: inline-block; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
    height: 100%; 
 
    width: 90%; 
 
    background: orange; 
 
    text-align: center; 
 
    
 
} 
 
.thumb { 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: purple; 
 
}

<div class='frame'> 
 
    <div class='image'></div> 
 
    <div class='thumbs'> 
 
    <div class='nav left'></div> 
 
    <div class='thumb-images'> 
 
     <div class='thumb'></div> 
 
     <div class='thumb'></div> 
 
     <div class='thumb'></div> 
 
     <div class='thumb'></div> 
 
     <div class='thumb'></div> 
 
     <div class='thumb'></div> 
 
    </div> 
 
    <div class='nav right'></div> 
 
    </div> 
 
</div>

источник

2015-10-20 18:42:11 ochi

Предотвращение содержимого div для обертывания

ответ

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