在另一个div

Question

我有一些人＃39;在一个主要的＆＃39; DIV。在＆＃39; person＆＃39;：hover我显示一个重叠的div。我希望它只出现在＆＃39; main＆＃39; div，不要超越主要的界限。 这样：

当光标在AGCH div上时

当光标在JALO div上时

我希望杰克伦敦的右边界与主要右边界对齐。

此处的完整示例：https://jsfiddle.net/yjdrnk9o/1/

HTML

 <div id="main">
    <div class="person">
        <span  class="short-name">WISH</span>
        <div class="more">
            <span>William</span>
            <span>Shakespeare</span>            
        </div>
    </div>

    <div class="person">
        <span  class="short-name">AGCH</span>
        <div class="more">
            <span>Agatha</span>
            <span>Christie</span>           
        </div>
    </div>

    <div class="person">
        <span  class="short-name">JALO</span>
        <div  class="more">
            <span>Jack</span>
            <span>London</span>         
        </div>
    </div>

</div>

CSS

#main {
  position: relative;
  border: 1px solid;
  width: 150px;
  height: 100px;
}

.person {
    float:left;
    border:1px solid;
    margin:1px 2px;;
}

.person:hover>.more {
    display: block !important;
}

.more {
    z-index:1;
    position:absolute;
    white-space: nowrap;
    background-color:gray;
}

谢谢

Answer 1

喜欢这个？ https://jsfiddle.net/yjdrnk9o/3/

我在你的html中添加了一个类来区分最后一个.person与其他人。然后说.person.right元素的.more子元素应该与右边对齐。

#main {
  position: relative;
  border: 1px solid;
  width: 150px;
  height: 100px;
}

.person {
    float:left;
    border:1px solid;
    margin:1px 2px;;
}

.person:hover>.more {
    display: block !important;
}

.more {
    z-index:1;
    position:absolute;
    white-space: nowrap;
    background-color:gray;
}

.person:last-of-type .more {
    right: 0;
}

<div id="main">
	<div class="person">
		<span  class="short-name">WISH</span>
		<div  style="display:none;" class="more">
			<span>William</span>
			<span>Shakespeare</span>			
		</div>
	</div>

    <div class="person">
		<span  class="short-name">AGCH</span>
		<div  style="display:none;" class="more">
			<span>Agatha</span>
			<span>Christie</span>			
		</div>
	</div>

    <div class="person on-right">
		<span  class="short-name">JALO</span>
		<div  style="display:none;" class="more">
			<span>Jack</span>
			<span>London</span>			
		</div>
	</div>
    
</div>

Answer 2

使用:last-of-type或:nth-of-type(3)

#main {
  position: relative;
  border: 1px solid;
  width: 150px;
  height: 100px;
}

.person {
    float:left;
    border:1px solid;
    margin:1px 2px;;
}

.person:hover>.more {
    display: block !important;
}

.more {
    z-index:1;
    position:absolute; 
    white-space: nowrap;
    background-color:gray;
}

.person:last-of-type .more{
    right: 0;
}

<div id="main">
	<div class="person">
		<span  class="short-name">WISH</span>
		<div  style="display:none;" class="more">
			<span>William</span>
			<span>Shakespeare</span>			
		</div>
	</div>

    <div class="person">
		<span  class="short-name">AGCH</span>
		<div  style="display:none;" class="more">
			<span>Agatha</span>
			<span>Christie</span>			
		</div>
	</div>

    <div class="person">
		<span  class="short-name">JALO</span>
		<div  style="display:none;" class="more">
			<span>Jack</span>
			<span>London</span>			
		</div>
	</div>
    
</div>