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の各シナリオの「基本」構造。

注 II : たとえば、次のような問題があります。

  • height画像が存在しない場合のタグの適切な出力li: 視覚的に、各liタグ (および関連する画像) は前のタグによってほとんど上書きされます。
  • padding-left画像が存在する場合と存在しない場合の「タイトル」と「短いテキスト」の適切な出力について。
  • ...

* 舞台裏では、出力コードに条件付きで HTML を追加する JavaScript コードがあります。

var html;

html = "<a>";

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

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

html += "</a>";

return html;
4

2 に答える 2

2

この例は、説明した 4 つのシナリオすべてをカバーしています。ライブデモ: 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 に答える