Как сделать так, чтобы изображения выстраивались в ряд независимо от уровня масштабирования браузера? - PullRequest
Новая
       42

Как сделать так, чтобы изображения выстраивались в ряд независимо от уровня масштабирования браузера?

4 голосов
/ 24 июня 2011

Кажется, что независимо от того, что я делаю, я не могу заставить ряд изображений выровняться по горизонтали при увеличении масштаба в браузере. Когда я увеличу масштаб, изображения, расположенные дальше всего вправо, упадут к следующему ряду, а не исчезнут с экрана. Я пробовал float:left;, создавая границу, и position:relative;, но не повезло.

Если я использую position:absolute;, мне кажется, что я должен вручную расположить каждое изображение.

Моя цель - создать скользящую галерею изображений, используя jquery, как здесь: http://www.elated.com/res/File/articles/development/javascript/jquery/elegant-sliding-image-gallery-with-jquery/

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

Ответы [ 2 ]

7 голосов
/ 24 июня 2011

попробуйте обернуть изображения в контейнер div шириной 100%, с помощью overflow: hidden; это остановит появление полосы прокрутки - Затем установите свойство white-space контейнера div на nowrap, что заставит изображения оставаться на одна строка, но переполнение за пределами области контейнера будет скрыто, что позволит вам записать изменение в левое / правое смещение или поле - вы можете сделать изображения встроенными или встроенными в блок *

Обратите внимание, что если вместе с этими изображениями также имеется текст заголовка, свойство пробела также повлияет на текст в заголовках, поэтому вам может потребоваться сбросить любые заголовки на white-space: normal

образец CSS: 

#container {
width: 500px;
height: 300px;
overflow: hidden;
border: 3px double #000;
white-space: nowrap;
}

#container img {display: inline-block; margin: 0 100px;}

HTML: 

<div id="container">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
</div>
1 голос
/ 24 июня 2011

попробуйте создать контейнер div вокруг изображений с фиксированной шириной, то есть: в px 

<html>
<head>
<title></title>
<style type="text/css">
    #container { width:1100px; }
    img { width:200px; height:100px; margin: 0 10px; float:left; }
</style>
</head>

<body>
<div id="container">
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
</div>
</body>
</html>
...