Question

<!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？我真正想要的是它在同一条线上。

Answer 1

#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;
}

您可以使容器的位置相对。并且工具提示要定位绝对。 Working Fiddle

Child Div浮动在父母之外

1 个答案: