gpt4 book ai didi

css - 两列 div 布局,一列占其余部分

转载 作者:太空狗 更新时间:2023-10-29 15:58:27 25 4
gpt4 key购买 nike

给定以下 html:

<body>
<div style="float: left; background: red">Hi</div>
<div style="float: left; background: blue">Hi again</div>
</body>

我希望第二个 div 占用页面的剩余宽度。将宽度设置为 100% 会使它换行到下一行,我不知道还要设置什么来修复它。左列需要根据其内容调整大小,而右列需要提醒水平空间。

我知道我可以用表格做到这一点,但在实际应用中,这会导致 IE6 出现其他问题。在应用程序中,左列是一棵树,其余的是主视图。树可以折叠。此外还有使用 Dojo 的弹出 div。当显示和移动弹出式 div 时,右列(以表格形式)扩展以与 IE6 中的左列重叠。是的,这是 IE 中的一个错误,所以我试图找到一个替代布局来解决这个问题。它适用于 div,但现在主视图不会展开以填满其他浏览器中的屏幕。

这是一个更好的破损版本。我需要修复它,以便表格不会扩展页面宽度并为此添加水平滚动:

<div style="float: left; background: red; padding: 5px; margin: 5px;">Hi</div>
<div style="background: blue">
<table width="100%"><tr><td bgcolor="green">
Hi again
</td></tr></table>
</div>

最佳答案

这听起来正是 flexbox 能够解决的问题。下面我使用标准的 flexbox 语法,但一些旧版浏览器可能需要前缀才能正常运行。

<div class="columns">
<div class="column">
<p>Hello, World.</p>
</div>
<div class="column">
<p>Content Area</p>
</div>
</div>
.columns { 
display: flex;
}
.column:nth-of-type(2) {
flex: 1;
}

这会为您提供您正在寻找的结果:一列随其内容增长,而另一列仅占用剩余空间。这里的一个建议是将 min-width 值应用于 flex 列以防止它变得太小。

演示:http://codepen.io/anon/pen/LglvH

关于css - 两列 div 布局,一列占其余部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1969572/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com