CSS: серия плавающих элементов без обертывания, а скорее прокрутка по горизонтали

Ответ 1

Как насчет использования display: inline-block таким образом, вы можете использовать границы элементов блока и получить горизонтальную полосу прокрутки.

#thumbnails_container {
    height:75px;
    border:1px solid black;
    padding:4px;
    overflow-x:scroll;
    white-space: nowrap
}
.thumbnail {
    border:1px solid black;
    margin-right:4px;
    width:100px; height:75px;
    display: inline-block;
}

Ответ 2

Вы пробовали

white-space: nowrap;

в вашем #thumbnails_container?

Ответ 3

Вместо того, чтобы плавать, попробуйте следующее:

#thumbnails_container {
    height:75px;
    border:1px solid black;
    padding:4px;
    overflow-x:scroll;
    overflow-y: hidden;
}
.thumbnail {
    border:1px solid black;
    margin-right:4px;
    width:100px; height:75px;
    display: inline;
}

Удалите div { overflow:hidden; }, остальное останется тем же.

Это немного проще, и они будут охватывать и прокручивать, как вы хотите.

Ответ 4

Это распространенная ошибка, предполагающая, что установка свойства white-space для "nowrap" также работает с плавающими элементами. Он работает только с встроенными элементами или встроенными блоками.

Я думаю, вам нужно, чтобы плавающие элементы были блоком, поэтому вы могли превратить их в встроенные блоки. Его можно получить во всех браузерах с помощью трюка:

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Это решение открывает множество новых веб-дизайнов, которые нужно изучить, поэтому я с благодарностью даю правильные кредиты автору: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Здесь вы можете прочитать документ, в котором говорится о свойствах белого пространства и плавающих элементах: http://reference.sitepoint.com/css/white-space

Ура!

Ответ 5

Это сводит меня с ума, не могу понять.

Этот вид работы:

.thumbnail {
    padding-right:4px;
    width:100px; height:75px;
    display: table-cell;
}
.thumbnail img {
    border:1px solid black;
    display: block;
    width:100px; height:75px;
}

Но я понятия не имею о поддержке браузера для отображения: table-cell;

Лично я бы либо сделал вертикальные палец или использовал javascript (полоса прокрутки браузера в любом случае уродлива)

Ответ 6

У меня была такая же проблема несколько месяцев назад. Я попробовал все представленные здесь решения. Они не работают.

Это мое решение:

Дайте оболочке div необходимое исправление ширины (тело также будет расширяться). Затем поместите содержимое в большой контейнер-контейнер (float или inline). Теперь вы можете использовать горизонтальную полосу прокрутки окна в качестве полосы прокрутки. Теперь прокручивается все остальное на странице (заголовок, нижний колонтитул и т.д.). Вы можете указать положение этих контейнеров: исправлено. Теперь они остаются там, пока вы прокручиваете лишнюю широкую обертку/тело.

Ответ 7

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

Вы можете использовать "границы и многое другое" с элементами display: inline-block. Вы также можете использовать фиксированные элементы /height inline-block, чтобы ваш дизайн был согласован.

В принципе, .thumbnail не-floated и display: inline-block, примените ширину/высоту, границы и т.д., а на #thumbnails_container используйте white-space: nowrap.

Ответ 8

Добавьте еще один контейнер для эскизов и установите его ширину в общую ширину всех миниатюр (вместе с их полями, границами и отступом). Посмотрите ниже в div с именем "thumbnails_scrollcontainer":

<style type="text/css">
div {
    overflow:hidden;
}
#frame {
    width:600px;
    padding:8px;
    border:1px solid black;
}
#thumbnails_container {
    height:75px;
    border:1px solid black;
    padding:4px;
    overflow-x:scroll;
}
.thumbnail {
    border:1px solid black;
    margin-right:4px;
    width:100px; height:75px;
    float:left;
}
.thumbnail img {
    width:100px; height:75px;
}
#current_image_container img {
    width:600px;
}
</style>
<div id="frame">
    <div id="thumbnails_container">
        <div id="thumbnails_scrollcontainer" style="width : 848px;">
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/glry-pixie-bob-kittens.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-1.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-3.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-Jan08.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery3.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery4.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten3.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten1.jpg" alt="foo" /></div>
        </div>
    </div>
    <div id="current_image_container">
        <img src="http://www.whitetailrun.com/Pixiebobs/PBkittenpics/shani-kits/Cats0031a.jpg" alt="foo" />
    </div>
</div>

Ответ 9

Этот способ работал у меня

main #thumbnailBox {
height: 154px;
width: auto;
overflow-x: scroll;
white-space: nowrap;}

main .thumbnail {
display: inline-block;}