动态 Div 宽度的问题

发布于 2025-01-01 23:34:17 字数 953 浏览 0 评论 0原文

从我读过的所有内容来看，我的 CSS 应该调整左侧文本的大小以适应剩余空间，但它似乎在 Chrome 中不起作用（具有讽刺意味的是 IE9 一次渲染了正确的内容）。< br> 我对 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;
}

原文

From everything I've read, my CSS should have the left hand text resize to fit the remaining space, but it doesn't seem to work in Chrome (ironically IE9 renders something right for once).
Bit of a noob with CSS so there's undoubtedly something I'm missing (and stuff that I don't need).

The website can be seen here;
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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

独木成林 2025-01-08 23:34:17

问题似乎出

float: left;

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

display: inline;

否则您的背景颜色将导致问题。

希望这有帮助。

The issue appears to be with the

float: left;

in #content. If you remove this you get the desired effect in all browsers. You'll also need to set the display on #content to be:

display: inline;

Otherwise your backround-color will cause issues.

Hope this helps.

回复收藏 0 原文

娇柔作态 2025-01-08 23:34:17

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

尝试添加

clear: both;

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

Try to add