0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container{
    background:#0033FF;
    float:left;
    width:150px;
}
#text{
background:#00FF00;
width:150px;
float:left;
}
#tooltip{
position:relative;
right:-100%;
background:#FF0000;
display:inline-block;
float:left;
}
-->
</style>
</head>

<body>

<div id="container">
    <div id="text">Here is some text</div>
<div id="tooltip">tip</div>
</div>
</body>
</html>

上記のコードで私がやろうとしているのは、コンテナ div、次にテキストを含む div、次にツールチップを含む div を作成することです。テキストとコンテナの幅に関係なく、テキストの右側に直接表示されるように、相対位置と右:-100% でツールチップを配置しています。この種の機能は機能しますが、何らかの理由でツールチップが新しい行に移動するようになりました。

私の質問はこれです。上記のコードで、id ツールチップの div が新しい行にあるのはなぜですか? 私が本当に望んでいるのは、それが同じ行にあることです。

4

1 に答える 1

0 
#container{
background:#0033FF;
float:left;
width:150px;
position:relative;
}
#text{
background:#00FF00;
width:150px;
float:left;
word-wrap:break-word;
}
#tooltip{
right:0px;
top:0px;
position:absolute;
background:#FF0000;
display:inline-block;
float:left;
}

コンテナの位置を相対的にすることができます。そしてツールチップは絶対に配置されます。働くフィドル

于 2013-01-06T04:51:01.943 に答える