如何使两列布局的主 div 自动适应浏览器宽度？

发布于 2025-01-03 02:55:21 字数 544 浏览 3 评论 0原文

我有两个并排的

，采用两列布局。我想让第二个 div 宽度自动适应浏览器宽度...但我的 CSS 不太工作：

<style>
#sidebar{
    float:left;
    width:230px;    
    min-height:10px;
    overflow:hidden;
    margin:auto;
}

#content{
    float:left;
    width:auto;
    min-height:10px;
    overflow:hidden;
    margin:auto;
    background-color:#cddfea;
}
</style>


<div id="sidebar">aa</div>

<div id="content"></div>

当我的侧边栏有一个时，如何使“内容”div 的宽度适合浏览器窗口的其余部分宽度为230px？

谢谢。 :)

原文

I have two <div>s side by side, in a two column layout. I want to make the second div width auto fit to the browser width... but my CSS isn't quite working:

<style>
#sidebar{
    float:left;
    width:230px;    
    min-height:10px;
    overflow:hidden;
    margin:auto;
}

#content{
    float:left;
    width:auto;
    min-height:10px;
    overflow:hidden;
    margin:auto;
    background-color:#cddfea;
}
</style>


<div id="sidebar">aa</div>

<div id="content"></div>

How can I make the width of the "content" div fit the rest of the browser window while my sidebar has a width of 230px?

Thank you. :)

分享到QQ

分享到微博

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

发布评论

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

耶耶耶 2025-01-10 02:55:21

试试这个： jsFiddle

HTML:

<div id="sidebar">aa</div>
<div id="content">bb</div>

CSS:

#sidebar{
    float:left;
    width:230px;    
    min-height:10px;
    overflow:hidden;
    margin:auto;
    background: #faa;
}

#content{
    min-height:10px;
    overflow:hidden;
    margin-left:230px;
    background:#cddfea;
}

Try this: jsFiddle

HTML:

<div id="sidebar">aa</div>
<div id="content">bb</div>

CSS:

#sidebar{
    float:left;
    width:230px;    
    min-height:10px;
    overflow:hidden;
    margin:auto;
    background: #faa;
}

#content{
    min-height:10px;
    overflow:hidden;
    margin-left:230px;
    background:#cddfea;
}

回复收藏 0 原文

~没有更多了~