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/

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

2 个答案: