CSS & DIV 对齐
Posted
技术标签:
【中文标题】CSS & DIV 对齐【英文标题】：CSS & DIV alignment 【发布时间】：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。 谢谢楼上...我试图将图像锚定到其 的顶部。 【参考方案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 ... 另一个出色的解决方案 .... 我想我还有很多东西要研究 :-) 非常感谢。以上是关于CSS & DIV 对齐的主要内容，如果未能解决你的问题，请参考以下文章