2009-08-05 10 views
2

以下は私の問題の簡易版です。 HTMLの以下の部分を考慮すると: 親のdivが表示されていないので、親divを隠す方法、内部divを表示する方法

<div id="div1" style="display:none"> 
    text i do not want 
    <div id="div2" style="display:block"> 
    text i want to keep 
    </div> 
</div> 

しかし、もちろんのを、「私はを維持したいテキスト」が表示されません。

質問:どのようにのみ、内側のdivの内容をdispalyのですか?

は、ウィジェットのブロガーが使用のために、私は、コードにはアクセスできませんし、いくつかのCSSと外側のdivをクリアする必要があります。私はすでにthisを読んだ後font-size: 0;を除外しています。負のマージンの乱れも、要素の位置のために除外されます。

答えて

3

はこれを試してください:実際のテキストは、非選択だけで非表示にしないだろう

もちろんの
color: transparent; 
background: transparent; 

、。

本当にあなたがしようとしているのは、ボックスモデルのコンセプトとは対照的です。あなたが見たくないテキストを同じレベルの別のdivに囲むことができたらあなたが見たい、そしてそのほかのdivを非表示にしない1、すなわち

<div id="div1"> 
    <div id="div3" style="display:none">text i do not want</div> 
    <div id="div2" style="display:block"> 
    text i want to keep 
    </div> 
</div> 
+0

を助けこれを試して使用あなたが 『できた場合はウィジェットブロガーが使用するには、コードへのアクセスを[彼は持っていません]」 – Blixt

+0

は、そこで』 - 私はそのようなものが彼の状況は可能ではないかもしれないことを認識しています。 – Amber

0

に表示して、別のDIVやSPANに「私はしたくないテキスト」囲み:なしのスタイルを。 HTMLの階層的な性質に起因

2

が、これはクラックするのは難しいナットです。一般的な解決策は、ある要素を他の要素から外してスタイルを入れて入れ子にするようにすることですが、この場合はできないと思います。

私が考えることができる唯一の解決策は、子要素を維持しながら親要素を無効にしますが、絶対配置ですが、要素に動的な高さ/幅がある場合は難しくなります。

しかし、これを試してみてください。

#div1 { 
    /* You might want to set a height here appropriate for #div2 */ 
    position: relative; 
    text-indent: -10000px; 
} 

#div2 { 
    left: 0; 
    position: absolute; 
    text-indent: 0; 
    top: 0; 
} 
1

はあなただけ消えるテキストまたはテキストがあまりにも崩壊し占めるスペースをしたいですか?

あなただけのテキストが消えるしたい場合は、

<div id="div1" style="text-indent:-9999px;"> 
    text i do not want 
    <div id="div2" style="text-indent:0"> 
    text i want to keep 
    </div> 
</div> 
1

が、それは私が原因」と彼はHTMLを変更すると、この問題を解決することを事実を認識だと思うが、私に

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>demo</title> 
<style type="text/css"> 
* { 
    margin:0; 
    padding:0; 
} 
body { 
    background: #fff; 
    font-size:100&#37;; 
} 
#hide { 
    visibility:hidden; 
} 
#show { 
    visibility:visible 
} 
</style> 
</head> 
<body> 
<div id="hide"> hide this text 
    <div id="show"> show this text </div> 
    hide this text too </div> 
</body> 
</html> 
関連する問題