html - 1つはサイズ変更可能で、3つの要素でレイアウトを作成する方法

Question

3 つの要素が隣り合っている必要があるレイアウトを作成したいと考えています。ここで、中央の要素はサイズ変更可能で、3 つ目の要素は動的な幅を持つ必要があります。

css display:table でレイアウトを作成しましたが、中央のサイズは変更可能です。しかし、それが正しいかどうか、またはこのレイアウトを作成するためのより良い方法があるかどうかはわかりません。

ここで、表示テーブルhttp://modnyblog.sk/displaytable/で達成したことを確認できます

ありがとう

Answer 1

あなたの質問は、javascript/jquery を使用して DOM を変更するための支援を求めています。コメントでは、レスポンシブ デザインについても言及していますが、一度に 1 つのことを習得してから、別の質問を投稿することをお勧めします。そのため、画面サイズが異なるレイアウトを考慮したものにはお答えしていません。

クリックで 2 番目の列のサイズを調整するには、javascript または jquery が必要です。また、javascript を使用してすべての列の高さを同じにしましたが、これはフレックスボックスでも行うことができます。1 番目と 2 番目の列にはコンテンツがないため、すべての列の高さを作成する必要があります。したがって、高さはありません。高さをピクセル単位で指定することもできますが、これは良い考えではありません。より多くのコードを記述し、レスポンシブなデザインをより困難にするので、制限されます。

私はdisplay: tableあなたが要求したものを使用するのが好きではないので、使用しましたdisplay: inline-block。私のフィドルでは、バニラの JavaScript も使用しました。これは単に私の好みです。jquery を使用して記述することもできますが、jquery を使用することでより少ないコード行で同じ結果を得ることができますが、私は jquery に依存することから離れています。

フィドルを参照してください。