white-space：nowrap break显示：表

我即将发疯。我用搜索和谷歌，但不能拿出一个解决方案，它不会工作:(white-space：nowrap break显示：表

我有一个div嵌套在其他divs自动垂直居中和背景本来它适合垂直几图片并调整其动态。我根据图片的数量（宽度，填充）使用几个CSS样式。

但该图库我要多少图片，原始布局断裂成几行，但我想要一个因为我可以滚动它们，但是“white-space：nowrap”会吹动所有的显示器：表格属性。

我想这应该发生？但是，我需要一个otehr解决方案或至少一种提示。

我也做了一个简化小提琴： http://jsfiddle.net/x696B/9/ 如果你删除它的工作，并滚动显示表属性。我需要在我的分区。：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; 
    }

如果我标记显示：表并显示：表细胞作为注释画廊看起来不错，滚动，但它不居中。（还有其他的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>

哦，原谅我这个愚蠢的问题，到现在这个论坛是一个很大的帮助，但现在我失去了。

在此先感谢。

来源

2012-09-12 stack collision with heap

你的doctype之前的元标记会将一堆浏览器扔进怪癖模式。它需要放在''部分。 – steveax

@steveax \t 谢谢，我修正了这个问题。我捡起了错误的信息。很高兴你纠正了我。 –

我得到了一个解决方案谢谢你感到沉沦，你让我的大脑工作:)和帮我看到的解决办法我改变视图类的宽度

.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-13 08:35:38

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

来源

2012-09-12 16:26:13 Scrimothy

谢谢，它看起来不错，并调整大小，但我放松我的垂直居中，没有显示：表，当我在我的页面上实现它。这是我使用它的唯一原因。 –

white-space：nowrap break显示：表

回答

相关问题