Пустое пространство:nowrap breaks дисплей: таблица

Я собираюсь сойти с ума. Я использовал поиск и Google, но не смог найти решение, оно не будет работать:(

У меня есть div, вложенный в другие div для автоматического вертикального центрирования и фона. Первоначально он помещается по вертикали в несколько изображений и динамически изменяет их размеры. Я использую несколько стилей CSS в зависимости от количества изображений (ширина, отступ).

Но для этой галереи у меня много картинок, оригинальный макет разбит на несколько строк, но я хочу вложенное "white-space:nowrap" с overflow-x: auto; в моем div. Так что я могу прокрутить их, но "пробел: сейчас" уничтожает весь материал и ломает все атрибуты отображения: таблицы.

Я полагаю, это должно произойти? Но тогда мне нужно другое решение или хотя бы добрый намек.

Я также сделал упрощенную скрипку: http://jsfiddle.net/x696B/9/ если вы удалите атрибуты таблицы отображения, она работает, и прокрутите. Мне нужно это в моем div.:D

Вот мой Nooby CSS (соответствующая часть)

html
{
    height:100%;
}

body 
{
    height:98%;
    background-color: #FFF9E5;  
    padding: 0px;                               


  }    
.wrapper
{
        margin:auto;
        padding: 0px;
        z-index: 0;
        height:100%;
        width:100%;
        display:table;
    vertical-align:middle;
}

    .outer
    {
        z-index: 0;
        padding: 0px;
        display:table-cell;
        vertical-align:middle;
        background-color: #FFF9E5;
     }


div.container
{
        margin: 0           auto;
            display:table;
        z-index: 0;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        width:60%;
        background-color: #867F27;
        padding-right:1%;
            padding-left:1%;
            white-space: nowrap;
            overflow: auto;
    } 

     .view
     {
        width:100%;
        white-space: nowrap;
        overflow-x: auto; 
        margin: 0 auto;
        text-align: left;
     }

Если я отмечу display:table и display:table-cell как комментарий, галерея выглядит хорошо и прокручивается, но не центрируется. (есть другие div с логотипом и т. д.)

вот мой HTML

<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>my page</title>
        <style type="text/css">
        @import url("style.css");
    </style>
</head>
<body>

<div class="wrapper">
    <div class="outer">
        <div class = "logo"><img src="logo.png"/></img></div>
        <div class="container">
                <div class="view">
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-1.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-2.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-3.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-4.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-5.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-6.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-7.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-8.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-9.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-1.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-2.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-3.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-4.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-5.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-6.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-7.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-8.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-9.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-1.jpg"/>
                    <img src="http://lorempixel.com/output/nature-q-c-205-154-2.jpg"/>
        </div>
    </div>
</div>


</body>
</html>

о, и простите мне этот тупой вопрос, до сих пор этот форум был большой помощью, но теперь я проиграл.

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

Источник

3 ответа

Решение

У меня есть решение Спасибо всем, вы заставили мой мозг работать:) И помогли мне увидеть решение Я изменил ширину класса просмотра

 .view
 {
    /*width:100%;*/ /*this resizes but nested in divs */
                    /*with display:table; it breaks them*/

    width:800px;    /*with a fixed width it works very nice*/
    max-width: 75%; /*lets the gallery shrink on resize of the browser*/

    white-space: nowrap;
    overflow-x: auto; 
    margin: 0 auto;
    text-align: left;
 }

Итак, я получил свою вертикально центрированную структуру, которую я могу сохранить на других страницах, и использовать ее для своей галереи. Он даже изменяет размеры (до определенного уровня), если вы изменяете размер окна браузера и выглядит все еще хорошо. Хорошего дня:)

Источник

Добавлять line-height: 0; на ваш #view стили. Это удалит лишнюю часть пространства под img в вашем #view div, Кроме того, есть несколько вещей, которые я удалил, которые тебе не нужны, и я достал твои display: table;, В большинстве случаев вам не следует использовать этот стиль отображения. Посмотрите на эту скрипку и дайте мне знать, если это работает для вас.

Источник

Проще всего добавить в свой контейнер:

table-layout: fixed;

Источник
Другие вопросы по тегам