Question

从我读过的所有内容中，我的CSS 应让左手文字调整大小以适应剩余空间，但它似乎无法在Chrome中运行（具有讽刺意味的是IE9渲染了一次正确的内容）。
有点CSS的菜鸟，所以毫无疑问我缺少的东西（以及我不需要的东西）。

这里可以看到网站;
baradineholdings.com.au

HTML;

<div id="internal">
    <div id="image">
        <img src="" alt="" width="563" height="422"/>
    </div> <!-- end #image -->
    <div id="content">
        <p> A whole heap of content goes here. </p>
    </div> <!-- end #content -->
</div> <!-- end #internal -->

CSS;

#internal {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

#image {
    width: 563px;
    height: auto;
    float: right;
    right: 0px;
    top: 0px;
    margin: 0;
}

#content {
    display: block;
    height: auto;
    background-color: #f1f1f1;
    float: left;
    margin-right: auto;
    position: relative;
}

Answer 1

问题似乎与

有关

float: left;

<＃>在#content中。如果删除它，您将在所有浏览器中获得所需的效果。您还需要将#content上的显示设置为：

display: inline;

否则你的背景颜色会引起问题。

希望这有帮助。

Answer 2

#content {
    clear: both;
    display: block;
    height: auto;
    background-color: #f1f1f1;
    float: left;
    margin-right: auto;
    position: relative;
}

尝试添加

clear: both;

动态Div宽度的问题

2 个答案: