Question

我对IE6有CSS问题。我不希望并排多个div（这在IE6中工作得很好），但在每个div中我都不是一个要浮动的元素。这适用于Chrome 13和其他较新的浏览器，但IE6和7无法正确显示。每个div占用父div的整个宽度。

每个div的宽度可能会有所不同，因此我无法设置宽度。

这是HTML：

<div id="wrapper">
    <div id="flickrImages">
        <div class="singlePhoto">Blarg
            <button>Press me!</button>
        </div>
        <div class="singlePhoto">Blarg
            <button>Press me!</button>
        </div>
        <div class="singlePhoto">Blarg
            <button>Press me!</button>
        </div>
        <div class="singlePhoto">Blarg
            <button>Press me!</button>
        </div>
        <div class="singlePhoto">Blarg
            <button>Press me!</button>
        </div>
    </div>
</div>

这就是CSS：

#wrapper {
    width: 969px;
    margin: 36px auto 50px auto;
}

#flickrImages {
    overflow: hidden;
}

.singlePhoto {
    background-color: #e0e0e0;
    float: left;
    margin-right: 10px;
    padding: 10px;
}

.singlePhoto button {
    float: right;
}

可以在此处测试代码：http://jsfiddle.net/K64vZ/94/

Answer 1

更改此部分代码，然后重试：

.singlePhoto {
    background-color: #e0e0e0;
    display: inline;
    width: 170px;
    margin-right: 10px;
    padding: 10px;
}

.singlePhoto button {
    display: inline;
}

CSS：IE6和多个div并排的问题，以及浮动右边的元素

1 个答案: