css - 固定宽度 div 和隐藏/可见 div 之间的可变宽度 div

Question

<div id="d1">
  <div id="d2">label</div>
  <div id="d3"><input name="t1" id="t1" type="text" /></div>
  <div id="d4">Message</div>
</div>

• #d1并且#d2有固定的宽度。
• #d4可以显示或隐藏（visibility: visible;或visibility: hidden;）。当它可见时，它具有固定的宽度。

我希望它#d3具有可变宽度，因此它可以填充#d1何时#d4隐藏的剩余右侧空间，但何时#d4可见，填充 和 之间的#d2空间#d4。

如何使用 CSS 实现这一点？

Answer 1

我相信以下 CSS 将实现您的目标：

#d1 {
    display: table; 
}

#d2, 
#d3, 
#d4 {
    display: table-cell; 
}

#d2, 
#d4 {
    width: (the width you want); 
}

Answer 2

我想出了一些稍微改变你的 HTML 结构的东西：

<div id="d1">
    <div id="d2">label</div>
    <div id="d4">Message</div>
    <div id="d3"><input name="t1" id="t1" type="text" /></div>
</div>

​CSS：

input { width: 100%; }
#d2 { 
    float: left; 
    display: inline-block; }
#d4 { 
    float: right;
    display: inline-block; }
#d3 { 
    padding: 0 10px; 
    overflow: hidden; }
​

预览：http: //jsfiddle.net/Wexcode/HLME4/