要素は親と兄弟に従って幅を調整します

Question

親divとその3つの子divを設定しました。今、3番目の子供は隠されています。私は最初の子の幅を20％に設定し、明示的に設定せずに残りの幅を自動的に残すようにします。 3番目の子供の幅は20％で、隠れていないときは親の幅の部分を取るべきですが、2番目の子供の幅はそれに応じて再調整する必要があります。

<div id="parent" style="background-color: pink;"> 
    <div id="child1" style="background-color: gray; display: inline-block; width: 20%;"> 
     div1 
    </div> 

    <div id="child2" style="background-color: blue; display: inline-block"> 
     div2 
    </div> 

    <div id="child2" style="background-color: violet; display: hidden; width: 20%;"> 
     div3 
    </div> 
</div> 

Answer 1

これはフレックスレイアウトで実装できます。ここにあなたのケースのためのコードスニペットは、次のとおりです。

#parent { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
#child1 { 
 
    flex-basis: 20%; 
 
} 
 
#child2 { 
 
    flex: 1; 
 
} 
 
#child3 { 
 
    display: none; 
 
}

<div id="parent" style="background-color: pink;"> 
 
    <div id="child1" style="background-color: gray;"> 
 
     div1 
 
    </div> 
 

 
    <div id="child2" style="background-color: blue;"> 
 
     div2 
 
    </div> 
 

 
    <div id="child3" style="background-color: violet;"> 
 
     div3 
 
    </div> 
 
</div>

いくつかの説明：

1. flexとして#parentの表示を確認し、すべての子要素のためのフレックスレイアウトを開始します。
2. をrowとすると、子要素が水平に表示されます。
3. #child2のflexを1とすると、利用可能なすべての領域を占めるように縮小または拡張されます（#parent）。

すべてインラインであることに注意してください。display CSSルールは削除されています。フレックスレイアウトが有効になると、これらは必要ありません。