Идеи по горизонтальной прокрутке изображений внутри div

 


.project-content{


/*border:1px solid red;*/


height: 92%;


}


.project-title{


width:1124px;


height:8%; /* change this to move up/down the title*/


word-wrap: normal;


border-top:2px solid black;


font-size: 19px;


margin-top: 30px; /* change this to move up/down the title*/


padding-bottom: 15px;


}


.project-text{


width:315px;


border:1px solid green;


float:left;


height: 92%; /* change this to move up/down the title*/


padding-right: 20px;


overflow-y:scroll;


word-wrap: break-word;


}


.project-images {


float:left;


border:1px dashed orange;


width: 80%;


/* hide the scroll bar from the .project-text*/


height: 92%;


margin-left: -15px;


background-color: white;


}


.project-images img{


height: 100%;


margin-left: 25px;


display: inline-block;


}

Code (markup): CSS

 


<div class="project-content">


<div class="project-title">


</div>


<div class="project-text">


</div>


<div class="project-images">


<img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]">


<img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]">


<img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]">


<img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]">


</div>


</div>

Код (разметка): Я столкнулся и с некоторыми другими проблемами в этой реализации. 1) Изображения хранятся одно под другим, а не в одной строке. 2) Если я изменю размер окна, уменьшив его, div для изображений окажется под div текста.

Поскольку я новичок в этом виде программирования, мне хотелось бы услышать любое мнение о том, как реализовать что-то подобное. Любые идеи по любому из этих вопросов (горизонтальная прокрутка, выравнивание элементов управления и т. д.) будут приветствоваться. Заранее спасибо.

Вам нужен дополнительный DIV для увеличения ширины.

 
.projectImages {
overflow:auto;
width:320px; /* == image width */
}

.projectImages div {
overflow:hidden; /* wrap floats */
width:1280px; /* == image width * number of images */
}

.projectImages img {
float:left;
width:320px;
height:auto; /* be sure aspect is preserved */
}

Код (разметка):

  <div class="projectImages"> <div> <img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]"> <img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]"> <img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]"> <img src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]"> </div> <!-- .projectImages --></div> 

Код (разметка): По крайней мере, если я следую тому, что вы пытаетесь сделать.

Часть SUCKTASTIC должна жестко запрограммировать ширину внутреннего DIV, чтобы плавающие изображения не переносились.

Вы можете попробовать white-space:nowrap; с изображениями, настроенными на их встроенное поведение, но это может быть ненадежным/непредсказуемым.

Я бы использовал встроенный или встроенный блок без переноса. Например. прокручиваемая галерея

. ваше здоровье, Гэри

Это было написано в начале 2008 года. Я не помню статус Chrome с тех пор, но IE определенно нуждался в помощи, как указано в комментарии. //редактировать: только что проверил Chrome, работает как положено. :пожимаю плечами: ~г Гэри