css - 2个分区中的分区。一种带 %width，一种带 auto

Question

<div id="one"> 
     <div id="two">
          content
     </div>
     <div id="three">
          content2
     </div>
</div>

我有 3 个 div。两个div合二为一

#one { max-width:1000px; }
#two { width:80%; }
#three { min-width:20%; }

我想改变属性display:none;在 #two 的 wordpress(widget) 中动态地然后 #three 应该有宽度 100%。

如何制作？

Answer 1

最简单的解决方案可能是使用 css 表格布局。只需根据需要更改 #two 的宽度即可。当你设置#two的display属性为display:none时，#three会根据需要自动变为100%。

#one {
    display:table;
    max-width:1000px;
    width:100%;
}
#two {
    display:table-cell;
    width:80%;
}
#three {
    display:table-cell;
}

Demo JSFiddle