Question

我快要疯了。我使用搜索和谷歌，但无法提出解决方案，它将无法正常工作：（

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

但是对于这个画廊我需要很多图片，原始布局分成几行，但是我想要一个嵌套的“white-space：nowrap”和overflow-x：auto;在我的div。所以我可以滚动它们，但是“white-space：nowrap”会破坏所有显示内容：表格属性。

我想这应该发生？但后来我需要一个解决方案或至少一种暗示。

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

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

提前感谢。

Answer 1

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

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

所以我得到了垂直居中的结构，我可以保留在其他页面上，并将其用于我的画廊。如果您调整浏览器窗口的大小并且看起来仍然很好，它甚至可以调整大小（到一个证书扩展）。祝你有愉快的一天：）

Answer 3

更简单，只需在您的容器中添加：

table-layout: fixed;

white-space：nowrap中断显示：table

3 个答案: