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

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

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

Если возможно, я хочу использовать только css. если мне нужно javascript, чтобы исправить это, я использую JQuery.

What I have now

Мой HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 
    <link href="css/index.css" rel="stylesheet"/> 
    <link href="css/global.css" rel="stylesheet"/> 
    <meta charset="UTF-8"> 
</head> 
<body> 
    <div id="list"> 
     <img src="img/1.jpg" class="img"> 
     <img src="img/2.jpg" class="img"> 
     <img src="img/3.jpg" class="img"> 
     <img src="img/4.jpg" class="img"> 
     <img src="img/5.jpg" class="img"> 
     <img src="img/6.jpg" class="img"> 
     <img src="img/7.jpg" class="img"> 
     <img src="img/8.jpg" class="img"> 
    </div> 
    <div id="output"> 

    </div> 
    <script src="js/jquery.js"></script> 
    <script src="js/image.js"></script> 

</body> 
</html>

мой CSS:

body{ 
padding:0px; 
margin:0px; 
overflow-y:hidden; 
} 
.img{ 
height:100px; 
width:200px; 
display:inline-block; 
margin-left:0px; 
} 

.loaded{ 
width:100%; 
} 
#list{ 
overflow-y:hidden; 
width:auto; 
}

источник

2014-11-02 Vinc199789

Просто добавьте

white-space: nowrap;

в #list

Поскольку ваши .img изображений правильно установлен на inline-block теперь вы можете контролировать пропуска родительского элемента с https://developer.mozilla.org/en-US/docs/Web/CSS/white-space (который относится к внутреннему инлайн, рядного блока детей.)

Nowrap
Сбрасывает пробелы, как для нормального, но подавляет разрывы строк (перенос текста) в тексте.

источник

2014-11-02 13:08:04

спасибо, что работает. – Vinc199789

Не забывайте, что отображение встроенного блока кроссбраузера: -moz-inline-stack; \t дисплей: встроенный блок; \t вертикально-выровненный: сверху; \t zoom: 1; \t * дисплей: встроенный; – d1m5n

Как @ roko-c-buljan просто добавьте white-space: nowrap; в #list. Это подавляет разрывы строк в тексте, которые имеют изображения, как у них display: inline-block.

body{ 
 
padding:0px; 
 
margin:0px; 
 
overflow-y:hidden; 
 
} 
 
.img{ 
 
height:100px; 
 
width:200px; 
 
display:inline-block; 
 
margin-left:0px; 
 
} 
 

 
.loaded{ 
 
width:100%; 
 
} 
 
#list{ 
 
overflow-y:hidden; 
 
width:auto; 
 
white-space:nowrap; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>test</title> 
 
    <link href="css/index.css" rel="stylesheet"/> 
 
    <link href="css/global.css" rel="stylesheet"/> 
 
    <meta charset="UTF-8"> 
 
</head> 
 
<body> 
 
    <div id="list"> 
 
     <img src="img/1.jpg" class="img"> 
 
     <img src="img/2.jpg" class="img"> 
 
     <img src="img/3.jpg" class="img"> 
 
     <img src="img/4.jpg" class="img"> 
 
     <img src="img/5.jpg" class="img"> 
 
     <img src="img/6.jpg" class="img"> 
 
     <img src="img/7.jpg" class="img"> 
 
     <img src="img/8.jpg" class="img"> 
 
    </div> 
 
    <div id="output"> 
 

 
    </div> 
 
    <script src="js/jquery.js"></script> 
 
    <script src="js/image.js"></script> 
 

 
</body> 
 
</html>

источник

2014-11-02 13:09:20 ckuijjer

-2

Если вы знакомы с поплавками, вы можете добавить

#list img { 
    float:left; 
}

источник

2014-11-02 13:10:17 waplet

это не работает – Vinc199789

да это работает - http://jsfiddle.net/ab4w0k0v/, миссия понятый вопрос, извините – waplet

@waplet нет, it * не * работа –

Вы ищете что-то вроде этого?

http://codepen.io/kozumii/pen/IoAFb

#list{ 
    overflow-x:scroll; 
    white-space:nowrap; 
}

источник

2014-11-02 13:19:18 Hitomi

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

ответ

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