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/