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

[Nma]

.project-content{

height: 92%;
}
.project-title{
width:1124px;
height:8%; 
word-wrap: normal;
border-top:2px solid black;
font-size: 19px;
margin-top: 30px; 
padding-bottom: 15px;
}
.project-text{
width:315px;
border:1px solid green;
float:left;
height: 92%; 
padding-right: 20px;
overflow-y:scroll;
word-wrap: break-word;
}
.project-images {
float:left;
border:1px dashed orange;
width: 80%;

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://wmlogs.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]">
<img src="[URL='https://wmlogs.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]">
<img src="[URL='https://wmlogs.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]">
<img src="[URL='https://wmlogs.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]">
</div>
</div>

Код (разметка): Я столкнулся и с некоторыми другими проблемами в этой реализации.


1) Изображения хранятся одно под другим, а не в одной строке.

2) Если я изменю размер окна, уменьшив его, div для изображений окажется под div текста.



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


Заранее спасибо.

 

[NesterovaYulia]

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

.projectImages {
overflow:auto;
width:320px; 
}
.projectImages div {
overflow:hidden; 
width:1280px; 
}
.projectImages img {
float:left;
width:320px;
height:auto; 
}

Код (разметка):
<div class="projectImages"> <div> <img src="[URL='https://wmlogs.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]"> <img src="[URL='https://wmlogs.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]"> <img src="[URL='https://wmlogs.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]"> <img src="[URL='https://wmlogs.com/yti/cgaagcGdodHRwOi8vdm9pY2VzLm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vZmlsZXMvMjAxNS8wOC9kcnktcml2ZXIuXZ2']http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg[/URL]"> </div> <!-- .projectImages --></div>
Код (разметка): По крайней мере, если я следую тому, что вы пытаетесь сделать. Часть SUCKTASTIC должна жестко запрограммировать ширину внутреннего DIV, чтобы плавающие изображения не переносились. Вы можете попробовать white-space:nowrap; с изображениями, настроенными на их встроенное поведение, но это может быть ненадежным/непредсказуемым.

 

[AvtoManHom]

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

ваше здоровье,

Гэри