html – white-space：nowrap中断显示：table_html-js-css

概述我快要疯了.我使用搜索和谷歌,但无法想出一个解决方案,它将无法正常工作:( 我有一个div嵌套在其他div中自动垂直居中和背景. 最初它垂直适合几个图像并动态调整大小. 我根据图片的数量(宽度,填充)使用几种CSS样式. 但对于这个画廊我需要很多图片,原始布局分成几行,但我想要一个嵌套的“white-space：nowrap”with overflow-x：auto;在我的div. 所以我可以滚动我快要疯了.我使用搜索和谷歌,但无法想出一个解决方案,它将无法正常工作:(

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

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

我想这会发生吗？但后来我需要一个更有效的解决方案或至少一种暗示.

我也做了一个简化的小提琴：
http://jsfiddle.net/x696B/9/
如果删除显示表属性,它会工作,并滚动.我需要在我的div中. ：d

这是我的nooby CSS(相关部分)

@R_404_6832@{    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等)

这是我的@R_404_6832@

<Meta http-equiv="X-UA-Compatible" content="IE=9" /><!DOCTYPE @R_404_6832@ PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><@R_404_6832@ lang="de"><head>    <Meta charset="utf-8">    <Title>my page</Title>        <style type="text/CSS">        @import url("style.CSS");    </style></head><body><div >    <div >        <div class = "logo"><img src="logo.png"/></img></div>        <div >                <div >                    <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></@R_404_6832@>

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

提前致谢.

解决方法添加行高：0;你的#vIEw风格.这将删除#vIEw div中img下方的额外一点空间.此外,我删除了一些您不需要的东西,我拿出了你的显示器：table;.在大多数情况下,您不应该使用该显示样式.看看这个 fiddle,让我知道这是否适合你. 总结

以上是内存溢出为你收集整理的html – white-space：nowrap中断显示：table全部内容，希望文章能够帮你解决html – white-space：nowrap中断显示：table所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1059174.html