我正在制作一个网络应用程序并遇到了一件有趣的事情。 所以我有一个带有其他 div 的包装 div。包装器具有以下格式:
#ready{
height:568px;
white-space: nowrap;
}
他们的 child div 有这个:
.theme{
overflow: hidden;
position:relative;
display: inline-block;
height:568px;
width:320px;
text-align: center;
background-color: #FFF;
}
它适用于 firefox 和 chrome,div 按预期彼此相邻。我必须将 float:left
添加到 .theme
以使其在 Safari 中工作。尽管当我添加 float:left
时,Mobile Safari 会将 div 换行。
这是一个错误,还是我做错了什么?有什么想法和解决方法吗?
[编辑] 添加了 html
<div id="ready">
<div id="welcome"class="theme active">
...
</div>
<div id="cat"class="theme">
...
</div>
<div id="minap"class="theme">
...
</div>
<div id="minecraft"class="theme">
...
</div>
<div id="padthai"class="theme">
...
</div>
<div id="orange"class="theme">
...
</div>
<div id="bszn"class="theme">
...
</div>
</div>
最佳答案
由于您尝试了 float: left
的变体, display: inline-block
, position: relative
和 position: absolute
让您的行保持在一行,但它总是在一个设备/浏览器或另一个设备/浏览器上分成两行,也许表格布局可以实现您的目标。
您可以使用 HTML <table>
元素或 CSS table
特性。在下面的示例中,我使用了 CSS。
http://jsfiddle.net/w01ckufb/2/
HTML
<div id="container">
<div id="ready">
<div id="welcome"class="theme active">IMAGE</div>
<div id="cat"class="theme">IMAGE</div>
<div id="minap"class="theme">IMAGE</div>
<div id="minecraft"class="theme">IMAGE</div>
<div id="padthai"class="theme">IMAGE</div>
<div id="orange"class="theme">IMAGE</div>
<div id="bszn"class="theme">IMAGE</div>
</div><!-- end .ready -->
</div><!-- end #container -->
CSS
#container {
display: table;
width: 4000px;
border-spacing: 15px;
}
#ready{
display: table-row;
border: 2px solid red;
}
.theme {
display: table-cell;
height: 568px;
width: 820px;
text-align: center;
background-color: #FFF;
border: 2px dashed blue;
}
希望这对您有所帮助。如果您有任何问题,请在下方发表评论。
关于ios - 移动版 Safari 中的空白 nowrap 和 float 左 "bug"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31895618/