Question

我正在尝试在我的模板中创建一个系统，如果我将内容放在“侧边栏”中，则侧边栏将显示，主窗口内容将被适当移动。如果侧边栏中没有内容，则表示不会显示。

 <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

但是，你可以看到我在左栏中没有放任何内容，但仍然显示填充！这是我不想要的，当侧边栏中没有内容时，我希望它完全消失。我有什么选择呢？我不想把填充物放在中心盒子上，因为当没有侧边栏时，我将留下中心盒子上的填充物。

Answer 1

在相当现代的浏览器中，您可以使用:empty伪选择器来定位这些空元素：

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

JS Fiddle demo

你也可以，如果你用一个元素（在这种情况下右边的那个，用一个p）将文本包装在列中，以便它可以用CSS定位，你可以使用margin代替padding：

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

JS Fiddle demo

此外，如果您将更多样式移动到子元素，您也可以处理可见边框（尽管这会导致父元素看起来不是它的完整，指定的高度）：

#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 Fiddle demo

Answer 2

你的问题是你设定了一个高度。如果您将height: 80px;更改为max-height: 50px;，则会解决您的问题

或者如果允许，你可以不使用身高

CSS空列但仍显示

2 个答案: