0

我有一个带有子 div 的 div，我正在尝试用它来创建幻灯片。我显示了子 div inline-block，除了 IE<=9 之外，一切看起来都很棒。在 IE<=9 中，每个div.contentItem都垂直显示。

我使用white-space: nowrapand inline-block（而不是float:left），因为更多div.contentItem是异步添加的，我不想div.content每次添加新元素时都必须重新计算宽度。因此，出于这个原因，我宁愿远离，float:left除非有一种方法可以使用浮动而不必指定宽度。

注意我无法更改文档类型，因为它位于母版页上并被我们 cms 中的许多其他页面使用。太多的回归测试。

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
    <div class="content">
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
        <div class="contentItem">...</div>
    </div>
</body>
</html>

css

.content {
    white-space: nowrap;
    margin-left: 256px;
    position: relative;
    padding-top: 14px;
}

.contentItem {
    display: -moz-inline-stack;
    display: inline-block !important;
    *display: inline;
    margin: 0 14px 0 0;
    vertical-align: top;
    zoom: 1;
}
4

4 回答 4

1

我将其更改div.contentItem为span.contentItem. 现在项目显示内联，不需要更改 css。

于 2012-09-19T20:04:03.740 回答
1

如果您保留您white-space: nowrap的父 div，您应该能够float: left在您的孩子上使用，而无需为父级定义宽度。

请参阅我之前为另一篇文章所做的小提琴插图。它也适用于这里。您可以调整结果窗口的大小以查看white-space设置为的两个版本nowrap（无论是浮动块还是内联块）它们始终保持在一行上。

于 2012-09-17T18:56:01.617 回答
0

内联块在涉及空白时很敏感，如果内容与其父级一样宽，它可能会中断并转到下一行..也许你需要这样的东西

<body>
    <div class="content">
        <div class="contentItem">...</div><div class="contentItem">...</div><div class="contentItem">...</div>
    </div>
</body>

从内联元素周围删除所有空格应该使它们完全符合您希望它们的大小

于 2012-09-17T18:53:42.890 回答
-1

IE <= 8 不完全支持display: inline-block. 在这里阅读。

而不是使用inline-block，尝试将此代码应用于您的幻灯片：http: //jsfiddle.net/9ACNT/

于 2012-09-17T18:52:17.960 回答