Firebug lite-没有帮助惠特的位置

Question

最后3小时我试图从img做例子：

完整示例是http://couchdb.apache.org/

我使用Firebug lite检查代码，并将其复制到小提琴中，这样我就可以重新理解我做错了什么......但它不起作用。

https://jsfiddle.net/Sooypai/h9apgk4k/1/

HTML就在这里，CSS很长，所以我不会在这里复制它。它在小提琴中

<div class="grid leadin">
<div class="wrap">
<img src="http://couchdb.apache.org/image/couch.png" alt=""/>
<ul class="text-block">
<li>
<h1 class="">
<strong>Apache CouchDB</strong>™ is a database</h1>
</li>
<li>
<h1>that uses<strong>JSON</strong>for documents,</h1>
</li>
<li>
<h1>
<strong>JavaScript</strong>for<strong>MapReduce</strong>indexes,</h1>
</li>
<li>
<h1>and regular<strong>HTTP</strong>for its<strong>API</strong>
</h1>
</li>
</ul>
<div class="button-container">
<a class="button" href="#download">
DOWNLOAD
<small class="download-version">Version 1.6.1</small>
</a>
</div>
</div>
</div>

我不能让img与<ul>相邻。有人可以解释一下我做错了什么吗？

Answer 1

你忘记了一些CSS规则..我在这个JSFiddle中包含了所有这些：https://jsfiddle.net/xjo4qvmc/1/

原因是您还必须更新绝对路径的相对路径

    $spotsopen = array(
    '1' => true,
    '2' => true,
    '3' => true,
    '4' => false,
    '5' => false,
    '6' => true,
    '7' => true,
    '8' => true,
    '9' => true,
    '10' => true,
    '11' => true,
    '12' => true,
    '13' => true,
    '14' => true,
    '15' => true,
    '16' => true,
    '17' => true,
    '18' => true,
    '19' => true
);

Answer 2

只需将<div id="image"></div> <div id="overlay"></div> <div id="light"></div> 添加到img。

即可

https://jsfiddle.net/h9apgk4k/2/

此外，你可能想要将自静态以外的位置添加到换行中，因为位置：绝对你在img上使用，而文本块是相对于下一个非静态定位的父元素。