4

この質問はよく聞かれるようですが、自分に合った答えが見つかりません。

例へのリンクを次に示します (以下の HTML も参照してください): http://biskup.biowiki.org/blah.html

リンクの後にテキストを流したいのですが、そうではありません。(私はこれを Mac の Firefox と Chrome で見ています。)

私が見た一般的な返信のいくつかを先取りしたいと思います。たとえば、ここでは改行を防止します</div>

それらの答えについて：

  • div の表示プロパティを "inline" または "inline-block" に設定することはできません。本当に非表示にしたいからです。とにかく、これはうまくいかないようです。たとえば、 http: //biskup.biowiki.org/blah2.htmlを参照してください。
  • 「float:left」も機能しません
  • これを div にしたいので、スパン要素を使用できません。ポップアップ要素として使用できます。
  • これはポップアップ要素であり、最終的にはそれをポップアップする JavaScript コード (div のすぐ横にあるリンクをクリックすることでトリガーされます) によって分離/再配置/再接続されるため、技術的には div をドキュメントの別の場所に配置できます。 (例えば、最後に); フローを中断しません。ただし、この HTML は動的に生成されるため、この例のように、それを表示するリンクのすぐ隣に div を作成すると非常に便利です。

ちなみに、前のタグに「display:inline」を追加することでこれを防ぐことができますが（例を参照）、それは非常に厄介な回避策です

私の例のHTMLは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <title>Dumb bug</title>
</head>
<body>


<p/>
<!-- the following (commented-out) line prevents the div from starting a newline; still seeking a better solution that is local to the div or adjacent anchor element -->
<!-- p style="display:inline;"/ -->
Here is some text.
Here is a
<a href="#">  link</a>.
<div style="display:none;">
  This text is inside the hidden div, and should not be shown.
  (A separate piece of code will detach/reattach/position/show this div as a popup, but it's convenient to generate it in the same place as the link.)
</div>
And here is some more text, that I want to flow on the same line after the link.

And some more.

<p/>
<p style="display:inline;"/>
Here is another paragraph.


</body>
</html>

追加するために編集: シングルトン p/ タグは、ほとんどのブラウザーが許すずさんな構文です (p ... p/ div 要素を囲むように解釈されます)。その親p。

samiz と IsisCode の返信で提案されているように、シングルトンの p/ タグをこれに変更すると...

<p style="display:inline">
...
<p/>

...その後、目的の動作が得られます (テキストが流れます)。

動的な動作 (つまり、リンクがクリックされたときに何が起こるか) に関するより多くのコンテキストを持つ同じ例について。

4

3 に答える 3

2

ちなみに、前のタグに「display:inline」を追加することでこれを防ぐことができますが（例を参照）、それは非常に厄介な回避策です

これが HTML の仕組みです。<p>ブロック行要素です。つまり、行全体を占有します。非表示の div が改行を引き起こしているのではなく、前の<p>要素が原因です。

于 2012-04-27T23:44:28.507 に答える
2

技術的に言えば、タグのdiv内部を持つべきではありません。pどちらもブロック要素であり、見ている奇妙な動作を引き起こします。spana の代わりに a を使用できない理由はありますdivか?

于 2012-04-28T00:15:13.730 に答える
0

jsFiddle: http://jsfiddle.net/5ArsK/3/

float:left上部のテキストを含む divに追加します。

<p/>
<!-- the following (commented-out) line prevents the div from starting a newline; still seeking a better solution that is local to the div or adjacent anchor element -->
<!-- p style="display:inline;"/ -->


<div style="float:left;">
     Here is some text.
     Here is a
     <a href="#">  link</a>.
</div>


<div style="display:none;">
  This text is inside the hidden div, and should not be shown.
  (A separate piece of code will detach/reattach/position/show this div as a popup, but it's convenient to generate it in the same place as the link.)
</div>
And here is some more text, that I want to flow on the same line after the link.

And some more.

<p/>
<p style="display:inline;"/>
Here is another paragraph.​
于 2012-04-27T23:40:39.197 に答える