Question

我真的希望我的IE7问题已经结束，但是我的公司仍然支持我们的企业，所以我很难解决一些问题。我必须忽视一些非常愚蠢的东西，我想知道一双新鲜的眼睛是否可以帮助修复。所以在这个问题中，我所拥有的文本div假设沿着图像div浮动，但它不起作用。

<div id="news-container">
    <div class="news-item">
        <div class="news-image" style="background:url('images/site/previewimage.png') no-repeat;">
            <img src="images/site/image-border.png" alt="" />
        </div>
        <div class="news-text">
            <h1>Latest News</h1>
            <h2><a href="#">"Almost, Maine" Tickets are now on sale!</a></h2>
            <p>Text blah blah blah.</p>
            <div class="linkbutton redlink"><a href="#">Read More</a></div>
        </div>
    </div>
</div>

CSS ......

#news-container {
    width:100%;
    margin:20px 0;
    float:left;
    position:relative;
    clear:both;
}
.news-item {
    width:960px;
    margin:auto;
    position:relative;
}
.news-image {
    height:210px;
    width:340px;
    margin-right:20px;
    position:relative;
    display:block;
    float:left;
}
.news-text {
    width:900px;
    display:block;
    position:relative;
}

感谢您的帮助！

Answer 1

当你浮动一个元素时，浮动周围的元素（仍然在文档流中）的文本将移动到那个浮点数，但是容器本身（在你的情况下，.news-text仍然从相同的左侧位置开始。

如果您的文字比图片长，您会看到文字落在与图片相同的左起始位置。

要获得正确的“悬挂缩进”，您需要为.news-text分配宽度，该宽度是图像剩余的宽度，并设置左边距以将其推离图像。这适用于所有浏览器，包括IE 7。

在IE 7中预览：http://fiddle.jshell.net/EqWA4/show/

要查看代码：http://jsfiddle.net/EqWA4/

.news-text {
    width:500px;
    margin-left: 365px;
    display:block;
    position:relative;
}

在IE7中浮动Div

1 个答案: