2012-02-23 12 views
1

私はエラーを表すdivを持っています。私の問題は、赤い枠線を持つため、divが空の場合(エラーがない場合でも)空の行として表示されるということです。私はこの行動が気に入らない。私はそれが空のときにdivが完全に見えないようにしたいと思います。赤い枠線で空のdivが赤い線として表示されます - CSSでのみ非表示にできますか?

また、私はjavascriptでそれをしたくありません— CSSでdivが空の場合に境界を非表示にすることは可能ですか?

+0

理解しやすくするためにコードを入力してください – sandeep

答えて

8

はい。ここでempty-cellsを使用して一つの可能​​な解決策である:

CSS

.error { 
    display:table-cell; 
    empty-cells:hide; 
    padding: 10px; 
    border: 1px solid red; 
} 

HTML

<div class="error"><!-- I am empty --></div> 
<div class="error">Error'd!</div> 

http://jsfiddle.net/At6Sp/

+0

これはまだ境界線を考慮しています。パディングしなくても、境界線はそこにあり、見えません。それは気晴らしのようなものです。 :P – Purag

+0

divがそれ自身の行またはそれに類するものである場合、誰も2pxの行の高さに気づくことはありません。あなたは完全に有効な方法でこれのような構造を使用することができる場所がたくさんあります。もし彼が2つのアイテムの間に入れようとしているなら、あなたは正しいのです - これは気を散らすでしょう。 – Interrobang

+0

私は '空のセル 'について知らなかったので+1します。おそらく、その仕様へのリンクを含めるべきです。 – Purag

10

チェックアウトこのCSS3 pseudoclass :empty

​div{ 
    border:1px solid red 
} 

div:empty{ 
    display:none 
} 

http://jsfiddle.net/nWRJb/1/

+1

+1しかし、IEのサポートは全くありません。これは本当に実用的な現実的な解決策ではありません:( – Interrobang

+0

+1:空のプロパティ – sandeep

+1

あなたが望むことを意味する彼のタグで@Interrobang OPの定義css3 – Joseph

3

最良の方法は、サーバー側からそれを制御するために、その空の場合は表示されませんです。 それ以外の場合は、空のセレクタを使用できますが、IEでのサポートは不変です。

はい、jqueryを使用すると、問題ありません。

$(document).ready(function() { $('div:empty').remove(); }); 
+0

+1、なぜ何もエラーがなければ、要素が全く書き込まれないようにすることはできません。 – Interrobang

関連する問題