Css 固定宽度div和隐藏/可见div之间的可变宽度div 标签 消息 #d1和#d2具有固定宽度 #d4可以显示或隐藏（可见性：可见；或可见性：隐藏；）。当它可见时，它具有固定的宽度

我希望

#d3

具有可变的宽度，因此当

#d4

被隐藏时，它可以填充

#d1

的剩余右侧空间，但当

#d4

可见时，填充

#d2

和

#d4

之间的空间

---

如何使用CSS实现这一点？

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

<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>

---

我想出了一些稍微改变HTML结构的方法：

#d1 {
    display: table; 
}

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

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

---

预览：

可能重复@Wex-Close，但我仍然需要右侧的div。好的，我发布了。非常感谢您的回答。我希望我能把两个答案标为有效。我没有标记这一点是因为它与IE7和更旧版本（）兼容，尽管我没有提到它是一个条件。非常感谢，我结束了这样做。但是，使用“visibility:hidden；”，它并没有像预期的那样工作，但使用“display:none；”，因为使用visibility属性似乎div仍然存在，但只是不可见。我是否应该编辑问题以提及“display”属性而不是“visibility”属性？不，我认为你的问题很好。

<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>

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