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 小提琴演示。

你也可以，如果你用一个元素（在这种情况下是右列，用 a 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 回答