0

テンプレート内にシステムを作成しようとしています。「サイドバー」にコンテンツを配置すると、サイドバーが表示され、メインウィンドウのコンテンツが適切に移動されます。サイドバーにコンテンツがない場合は、表示されません。

 <div id="newcontainer">
    <div id="content">               
        <div id="sidebar-left">
        {% block left_sidebar %}
        {% endblock%}
        </div>
        <div id="sidebar-right">
        {% block right_sidebar %}
        {% endblock%}            
        </div>
        <div id="col-main">
        {% block content %}
        {% endblock%}
        </div>
    </div>
</div>

これは私が他のユーザーの助けを借りてどれだけ得たかです： JSFIDDLE LINK

ただし、ご覧のとおり、左側の列にはコンテンツを入力していませんが、それでもパディングが表示されます。これは私が望んでいないことです。サイドバーにコンテンツがない場合は、完全に非表示にします。これにはどのようなオプションがありますか？サイドバーがない場合は、センターボックスにパディングが残っているため、センターボックスにパディングを配置したくありません。

4

2 に答える 2

2

かなり最近のブラウザでは、:empty疑似セレクタを使用してこれらの空の要素をターゲットにすることができます。

#sidebar-left:empty,
#sidebar-right:empty {
    padding: 0;
    border-width: 0;
}

JSフィドルデモ。

pまた、 CSSでターゲットにできるように、要素（この場合は右列のテキスト）を使用して列のテキストをラップする場合は、次marginの代わりに使用できpaddingます。

#sidebar-left p,
#sidebar-right p {
    margin: 0 10px;
}

JSフィドルデモ。

また、より多くのスタイリングを子要素に移動すると、表示されている境界線にも対処できます（ただし、これにより、親要素が指定された完全な高さではないように見えます）。

#sidebar-left p,
#sidebar-right p {
    padding: 0 10px;
    background-color: grey;
    border: 0 solid #000;
}

#sidebar-right p {
    border-left-width: 1px;
}

#sidebar-left p {
    border-right-width: 1px;
}

JSフィドルデモ。

于 2012-10-08T16:35:03.070 に答える
0

あなたの問題はあなたが高さを設定することです。それに変更height: 80px;するmax-height: 50px;と問題が解決します

または、許可されている場合は高さを使用できません

于 2012-10-08T18:24:17.997 に答える