CSS & DIV 对齐答案

【问题标题】：CSS & DIV alignmentCSS & DIV 对齐
【发布时间】：2015-05-03 10:57:11
【问题描述】：

如果有人能帮助我解决以下“问题”，我将不胜感激。

我有一个文本项目列表（“文本”）；每个文本都指一个图像

目的是让图像出现在“图像”

中，当鼠标在相关文本上时

这是我能做的最好的......

<html>
<head><style>
div                  { border: solid 1px #000; margin: 0 auto;}
#image               { width: 250px;
                       float: right;
                       margin-top: 0px;
                       display: none; }
#text                { width: 750px;
                       float: left; }
#text:hover + #image { display: block; }
</style></head>
<body>
<div style="width: 1004px; height: 500px; background-color:#dedede;">
     <div id="text">Text-1 </div>
     <div id="image"><img src="image-1.jpg" width=250px/></div>
     <div id="text">Text-2</div>
     <div id="image"><img src="image-2.jpg" width=250px/></div>
</div>
</body></html>

...问题是：如何让图像始终出现在其

的顶部，而不跟随文本？

提前非常感谢！

【问题讨论】：

您是在问如何使图像出现在文本之前？如果是这样，只需颠倒 div 的顺序，以便图像 div 首先是文本 div。
谢谢楼上...我试图将图像锚定到其的顶部。

标签： html css image alignment

【解决方案1】：

取决于你的情况，但我会更换 #text:hover + #image { display: block; } 与

#text:hover + #image { display: block; position:absolute; margin-left:750px;}

这样 div 将始终位于右上角。

【讨论】：

谢谢伊万！太棒了……这正是我无法做到的。所以，你解决了我的问题，我学到了一些新东西。非常非常感谢！
不客气，请记住这个 div 的新属性，以防您更改网页布局并想知道为什么它不在正确的位置。

【解决方案2】：

您不能在 HTML 中多次使用同一个 ID，因此，您必须使用类将 #text 和 #image 替换为 .text 和 .image 之类的内容。

<div class="text">Text-1 </div>
<div class="image"><img src="image-1.jpg" width=250px/></div>
<div class="text">Text-2</div>
<div class="image"><img src="image-2.jpg" width=250px/></div>

这是一个工作版本的演示：http://jsfiddle.net/cer95pqx/5/

【讨论】：

谢谢克里斯蒂安！这不是我想要的，但它确实是一个不错的选择。

【解决方案3】：

只需将 #image 的 CSS 代码更改为：

#image {

    width: 250px;
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
}

并将position 设置为relative，用于父容器div。

<div style="width: 1004px; height: 500px; background-color:#dedede; position: relative;">

JSFiddle

【讨论】：

谢谢 Mateusz ... 另一个出色的解决方案 .... 我想我还有很多东西要研究 :-) 非常感谢。