我想要一个两列div布局,其中每一个都可以有可变的宽度。

div { 浮:左; } 接着{ 背景:# ccc; } < div > < / div >树 < < div class = "第二”>视图/ div >

我想要“视图”div扩展到整个可用的宽度后,“树”div已经填补了所需的空间。

目前,我的“视图”div被调整为它所包含的内容 如果两个跳水都占据整个高度也会很好。


不可重复声明:

当设置float:left时,将div扩展到最大宽度 因为左边的宽度是固定的。 帮助div -使div适合剩余的宽度 因为我需要两列都向左对齐


当前回答

我不确定这是否是你所期待的答案,但是,为什么不将树的宽度设置为“自动”和“视图”的宽度设置为100% ?

其他回答

我不确定这是否是你所期待的答案,但是,为什么不将树的宽度设置为“自动”和“视图”的宽度设置为100% ?

使用flexbox这是相当容易的。请参阅下面的代码片段。我添加了一个包装容器来控制流和设置全局高度。还添加了边界以标识元素。注意,div现在也会根据需要展开到全高度。 在现实场景中,应该为flexbox使用供应商前缀,因为它还不完全受支持。

我开发了一个免费的工具来理解和设计使用flexbox的布局。看看这里: http://algid.com/Flex-Designer

.container { 身高:180 px; 边框:3px实心#00f; 显示:flex; 对齐项目:伸展; } div { 显示:flex; 边框:3px solid #0f0; } 接着{ 显示:flex; flex-grow: 1; 边框:3px实体#f00; } < div class = "容器" > < div > < / div >树 < < div class = "第二”>视图/ div > < / div >

这将是一个很好的例子,说明用表处理起来很简单,而用CSS处理起来很难(如果不是不可能的话,至少在跨浏览器的意义上)。

如果两列的宽度都是固定的,这就很容易了。

如果其中一列的宽度是固定的,这将稍微困难一些,但完全可行。

两个列的宽度可变,恕我直言,你只需要使用一个两列的表。

我不明白为什么人们愿意如此努力地为简单的柱状布局寻找一个纯css解决方案,而使用旧的TABLE标签是如此容易。

所有浏览器仍然有表布局逻辑…也许你可以叫我恐龙,但我说让它帮你。

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2> < tr > <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td> . < td背景= " # F0F0F0 " >视图td > < / < / tr > 表> < /

在跨浏览器兼容性方面风险也小得多。

.btnCont { display: table-layout; width: 500px; } .txtCont { display: table-cell; width: 70%; max-width: 80%; min-width: 20%; } .subCont { display: table-cell; width: 30%; max-width: 80%; min-width: 20%; } <div class="btnCont"> <div class="txtCont"> Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px! </div> <div class="subCont"> This column as well as the entire container works like a table. Isn't Amazing!!! </div> </div>