5

我快要疯了。我使用了搜索和谷歌，但无法提出解决方案，它不起作用:(

我有一个嵌套在其他 div 中的 div，用于自动垂直居中和背景。最初它垂直适合多个图像并动态调整它们的大小。我根据图片的数量（宽度，填充）使用了几种css样式。

但是对于这个画廊，我有很多图片，原来的布局分成几行，但我想要一个嵌套的 "white-space:nowrap" 和 overflow-x: auto; 在我的分区中。所以我可以滚动它们，但是“white-space:nowrap”会破坏所有的东西，破坏所有的 display:table 属性。

我想这应该发生？但是我需要一个其他的解决方案或至少一个善意的提示。

我还做了一个简化的小提琴： 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>

哦，原谅我这个愚蠢的问题，到目前为止这个论坛是一个很大的帮助，但现在我输了。

提前致谢。

4

3 回答 3

2

我得到了一个解决方案谢谢大家，你让我的大脑工作:) 并帮助我看到了解决方案我改变了视图类的宽度

 .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;
 }

所以我得到了垂直居中的结构，可以保留在其他页面上，并将其用于我的画廊。如果您调整浏览器窗口的大小并且看起来仍然不错，它甚至会调整大小（在一定程度上）。祝你今天过得愉快 ：）

于 2012-09-13T08:35:38.013 回答
1

添加line-height: 0;到您的#view样式中。img这将删除#view div. 另外，我删除了一些你不需要的东西，我把你的display: table;. 在大多数情况下，您不应该使用该显示样式。看看这个小提琴，让我知道这是否适合你。

于 2012-09-12T16:26:13.360 回答
0

更简单的是在你的容器中添加：

table-layout: fixed;

于 2018-07-31T15:41:38.393 回答