空格:nowrap断点显示:表
我快要发疯了。我使用了搜索和谷歌，但没有想出解决方案，它不会工作:(
我有一个嵌套在其他div中的div，用于自动垂直居中和作为背景。最初，它可以垂直放置几个图像，并动态调整它们的大小。我根据图片的数量(宽度，填充)使用几种css样式。
但是对于这个图片库，我需要很多图片，原始布局分成几行，但我想要一个嵌套的“空白:nowrap”和overflow-x: auto；在我的div中。所以我可以滚动它们，但是“空格: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>哦，请原谅我这个愚蠢的问题，到目前为止，这个论坛帮了我很大的忙，但现在我输了。
提前谢谢。
回答 3
Stack Overflow用户
发布于 2012-09-13 16:35:38
我得到了一个解决方案，感谢每个人，你让我的大脑工作:)，并帮助我看到解决方案，我改变了视图类的宽度
.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;
}所以我得到了垂直居中的结构，我可以保留在其他页面上，并将其用于我的图库。如果你调整浏览器窗口的大小，它甚至会调整大小(到一定程度)，而且看起来仍然很好。祝您有愉快的一天:)
Stack Overflow用户
发布于 2012-09-13 00:26:13
在您的#view样式中添加line-height: 0;。这将在您的#view div中删除img下的额外空间。还有，我删除了一些你不需要的东西，我拿出了你的display: table;。在大多数情况下，您不应该使用显示样式。看看这个fiddle，让我知道它是否适合你。
Stack Overflow用户
发布于 2018-07-31 23:41:38
更简单的方法就是在你的容器中添加：
table-layout: fixed;
https://stackoverflow.com/questions/12392396
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号