CSS＆DIV对齐

如果有人能帮我解决下面的“麻烦”，我会很感激。CSS＆DIV对齐

我有一个文本项目列表（“text”< div>）;每个文本是指图像

目的是让图像出现在“图像” < DIV>中，当鼠标移动到相关文字

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

<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>

...问题是：我怎么CON使图像在其< div的顶部>总是出现，而不遵循的文本？

非常感谢提前！

来源

2015-03-02 Viligelmo

你问如何使图像来到文本之前？如果是这样，只需颠倒div的顺序，以便图像div首先跟着文本div。 – floor 2015-03-02 22:45:42

谢谢楼...我试图将图像固定到其顶部< div >。 – Viligelmo 2015-03-02 23:08:08

要看您的具体情况，但我会用

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

更换 #text:hover + #image { display: block; } 这样的股利将永远在右上角。

来源

2015-03-02 22:57:59 Luchiro

谢谢伊凡！很棒......这正是我无法做到的。所以，你已经解决了我的问题，并且我学到了一些新东西。非常感谢！ – Viligelmo 2015-03-02 23:04:44

不客气，只要记住这个div的新属性，以防你改变你的网页布局，并想知道为什么它不在正确的位置。 – Luchiro 2015-03-02 23:09:09

你不能在你的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/

来源

2015-03-02 23:04:26

谢谢基督徒！这不是我所期待的，但它确实是一个很好的选择。 – Viligelmo 2015-03-02 23:32:36

只要改变你的CSS代码#image到：

#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

来源

2015-03-02 23:10:36

谢谢Mateusz ...另一个优秀的解决方案....我想我有很多东西要学习:-)非常感谢。 – Viligelmo 2015-03-02 23:17:53

回答

相关问题