如何使用 HTML-CSS 有条件地输出数据？

Question

我正在实现一个无序列表 (<ul><li>...</li></ul>)，其中显示一个链接 (<a>...</a>)。在这个链接标签中，除了标题文本之外，我必须有条件地 *显示图像和短文本。

“完整”输出类似于以下内容：

<ul>
  <li>
    +------------------------+
    | +---+  Title           |
    | |   |                  |
    | +---+  Some short text |
    +------------------------+
  </li>
</ul>

但是，由于上述输出是有条件地构建的，因此可能没有显示图像或短文本。所以...

...如果图像不存在但短文本存在，那么输出应该类似于

 +------------------------+
 | Title                  |
 |                        |
 | Some short text        |
 +------------------------+

...如果短文本不存在但图像存在，那么输出应该类似于

 +------------------------+
 | +---+  Title           |
 | |   |                  |
 | +---+                  |
 +------------------------+

...如果图像和短文本都不存在，那么输出应该类似于

 +------------------------+
 | Title                  |
 +------------------------+

我想在 HTML-CSS 标签属性上“播放”，而不是“直接”在“后面”/“生成”该输出的代码上。我该怎么做？

---

注意 I：jsfiddle.net/zF5Cw/2 上每个场景的“基本”结构。

注二：比如我有问题：

• 关于在图像不存在时正确输出li 标签的height：视觉上，每个li 标签（和相关图像）几乎都被前一个标签覆盖；
• 关于在图像存在和不存在时正确输出“标题”和“一些短文本”的padding-left；
• ...

---

* 在幕后我有一个 JavaScript 代码，它有条件地将 HTML 添加到输出代码中：

var html;

html = "<a>";

if ( image ) { 
  html += "<img>...</img>"
}

if ( short_text ) { 
  html += "Some short text"
}

html += "</a>";

return html;

Answer 1

此示例涵盖了您描述的所有四个场景。现场演示：http://jsfiddle.net/zF5Cw/3/

li {
    padding: 10px;
    border: 1px solid #000;
    margin: 10px;
    overflow: auto;
    width: 300px;
}
img,span{float: left;}
img{margin-right: 10px;}
span{width: 250px;}

Answer 2

CSS 不包含可以更改标记的条件逻辑。您需要使用 JavaScript 来执行此操作。