2

我正在实现一个无序列表 ( <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中每个场景的“基本”结构。

注二：例如，我有问题：

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

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

var html;

html = "<a>";

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

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

html += "</a>";

return html;
4

2 回答 2

2

此示例涵盖了您描述的所有四个场景。现场演示：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;}
于 2012-12-07T20:24:25.747 回答
0

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

于 2012-12-07T18:55:45.117 回答