CSS 折叠/隐藏 <span> 中没有数据的 div答案

【问题标题】：CSS Collapsing/Hiding divs with no data in <span>CSS 折叠/隐藏 <span> 中没有数据的 div
【发布时间】：2012-11-08 22:15:51
【问题描述】：

我正在尝试显示一个包含以下信息的地址：标题、部门、地址 1、地址 2、城镇/州/邮编和国家/地区（5 行单独的数据）。问题是有时公司可能只有标题、地址 1 和城镇/州/邮编，而其他时候可能只有地址 2。这是在数据库记录请求服务器端确定的。因此，当我的某些标签为空白时，如何使我的输出看起来正确？ 我希望包含空跨度的 div 基本上被折叠/删除。 我唯一的想法是如何使用 jquery 和选择器来查找所有具有空白跨度的 div（因为这都是一个 asp.net label 真的是），然后删除那些 div 但这似乎是一种糟糕的形式。有没有办法用css做到这一点？可能的代码类似于： $('span:empty:only-child').parent('div').remove();

图片示例（忽略我将修复的间距/缩进问题）

缺少部门、地址 2 和国家/地区

所有可能的字段

HTML

<asp:Label runat="server" ID="lblBillingAddressHeader" CssClass="lblBillingAddressHeader" Text="Billing Address:" />
<div style="position:relative; top:150px; left: 113px;">
    <div class="test">
      <asp:Label runat="server" ID="lblBillingDivision" CssClass="lblBillingShippingDivisionFont" />
    </div>
    <div class="test">
      <asp:Label runat="server" ID="lblBillingAddress" CssClass="lblBillingShippingFont" />
    </div>
    <div class="test">
      <asp:Label runat="server" ID="lblBillingAddress2" CssClass="lblBillingShippingFont" />
    </div>
    <div class="test">
      <asp:Label runat="server" ID="lblBillingAddress3" CssClass="lblBillingShippingFont" />
    </div>
    <div class="test">
      <asp:Label runat="server" ID="lblBillingAddress4" CssClass="lblBillingShippingFont" />
    </div>
</div>

CSS

.test {
    position: relative;
    top: 0px;
    left: 0px;
    height: 12px;
    width: 300px;
}

.lblBillingShippingDivisionFont {
    font-size: small;
    font-weight: bold;
}

.lblBillingShippingFont {
    font-size: 10.6px;
}

【问题讨论】：

那不是 HTML，那是 .NET 代码。

标签： asp.net css

【解决方案1】：

你能重新组织你的 HTML 吗？

HTML

<div style="position:relative; top:150px; left: 113px;">
  <asp:Label runat="server" ID="lblBillingDivision" CssClass="lblBillingShippingDivisionFont" />
  <asp:Label runat="server" ID="lblBillingAddress" CssClass="lblBillingShippingFont" />
  <asp:Label runat="server" ID="lblBillingAddress2" CssClass="lblBillingShippingFont" />
  <asp:Label runat="server" ID="lblBillingAddress3" CssClass="lblBillingShippingFont" />
  <asp:Label runat="server" ID="lblBillingAddress4" CssClass="lblBillingShippingFont" />
</div>

CSS

.lblBillingShippingDivisionFont,
.lblBillingShippingFont {
    position: relative;
    top: 0px;
    left: 0px;
    width: 300px;
    display: block;
}

.lblBillingShippingDivisionFont {
    font-size: small;
    font-weight: bold;
}

.lblBillingShippingFont {
    font-size: 10.6px;
}

jsFiddle http://jsfiddle.net/LkFSV/

【讨论】：

已经发布了一些其他有效的答案，但是这种方法是我想要解决的方法。我在将可见性设置为虚假服务器端时遇到了问题，所以这很好用。我知道 display: block 占用尽可能多的可用宽度，然后创建一个新行。当什么都没有时它会崩溃吗？这是块的工作原理吗？
理论上是的——我相信大多数浏览器都是这样工作的。但是，IE 可能对此有一些问题 - 它有一个错误/怪癖，它会为空 div 提供最小的单行高度。抱歉，当我发布此内容时并没有考虑 IE。您可能还想为 IE 用户添加一个 JS 修复程序。

【解决方案2】：

jQuery 代码：

$(document).ready(function(){
        $('div').each(function() {
           if ($(this).find('span').text() == '') {
             $(this).hide();
           }
        });
      });

http://jsbin.com/axaxut/1/edit

【讨论】：

【解决方案3】：

不幸的是，CSS 中没有父选择器。如果有，您可以执行以下操作：

span:empty:parent { display: none; }

你最好的选择是你已经拥有或做服务器端的 jQuery，我个人认为服务器端是你最好的选择。

【讨论】：

您认为最简单的方法是将 id 和 runat=server 提供给 5 个地址 div，然后根据查询将某些 div 的可见属性设置为 false？我可以做到我只是希望有一种方法可以从 css 中做到这一点
是的。没有我知道的 CSS 解决方案。您需要一个父选择器，我认为即使在 CSS3 中也没有。如果有，肯定不会有浏览器支持。

【解决方案4】：

由于这是 asp.net 代码，您可以从服务器端代码检查 address2 是否为空并简单地隐藏控件。

if(string.IsNullOrEmpty(lblBillingAddress2.Text))
    lblBillingAddress2.Visible = false;

【讨论】：