html - 2 つのサイドバーと柔軟なセンターカラム CSS

Question

固定幅のサイドバーと流動的な中央を備えた 3 列のグリッド。

私はこれに苦労しています。私はこれらのプロパティを持っています:

#sidebar { width: 65px; padding: 0px; }
#content { width: 100%; }

次に、すべてのテンプレートで次のように呼び出されます。

{% block left_sidebar %} Test {% endblock %}
{% block content %} Content {% endblock %}
{% block right_sidebar %} Test {% endblock %}

ただし、左側のサイドバーを「コンテンツ」の上に配置し、右側のサイドバーをその下に配置します。どうすればこれを克服できますか？

サイドバーにコンテンツがない場合は、中央のコンテンツで利用可能なすべてのスペースを埋める必要があります。そのため、使用可能なスペースの間で 100% に設定しようとしていました。したがって、左の列がない場合は、中央のコンテンツがページの左の 2/3 を自動的に埋めるようにします。

score 0 · Accepted Answer

お手伝いありがとう。ここで答えを見つけたと思います:

score 0 · Accepted Answer

div を左にフロートさせ、合計幅がコンテナーの 100% 以下であることを確認する必要があります。

大まかなアイデア:

#sidebar, #content {float: left;}
#sidebar { width: 10%; }
#content { width: 80%; }

html - 2 つのサイドバーと柔軟なセンター カラム CSS