中間のコンテンツが変更されたときに3つのdivを自動的にサイズ変更する

Question

私がやっているのは、3つのdivが固定幅のコンテナにラップされており、中間のdivのコンテンツが拡大すると自動的にサイズが変更されます。中央が大きくなるにつれて、その横にある2つはそれが意味をなさないならば小さくなります。

divまたはspanを使用する必要があるかどうかは不明です。

CSSに関するアドバイスはありますか？

Answer 1

を、中央のdivが ます2つのリンクを含みます。その場合:)

、私はあなたがが使用することができるかもしれないという単純なもので答えますよ。

を参照してください：http://jsfiddle.net/uZ5dn/

<div class="container"> 
    <span class="middle">content con tent the tent of cons content content</span> 
</div> 

.container { 
    border-top: 5px solid #f0f; 
    text-align: center; 
} 
.middle { 
    background: #fff; 
    display: inline-block; 
    position: relative; 
    top: -5px; /* same as border-top-width */ 
} 

はそれは素晴らしいではありませんが、それは十分に良いかもしれません。

少なくとも、私は次に何を提案するかについてより良い考えを得るでしょう。

Answer 2

質問を正しく読んでいれば、JavaScriptとDIVSでこれを行う必要があると思われます。

.height（）関数を使用すると、DIVの実際のサイズをピクセル単位で取得して設定できます。

だから、あなたのようなものを行うことができます：

の側に2つのdiv中央のdiv要素が何も含まれません、 だけのborder-top @thirtydot

if ($('#div2').height() > 200) { 
    $('#div1').height(100); 
    $('#div3').height(100); 
} else { 
    $('#div1').height(200); 
    $('#div3').height(200); 
}