Firebug lite-无助于白色位置

Question

在过去的 3 小时里，我正在尝试从 img 制作示例：

完整的例子是http://couchdb.apache.org/

我用 Firebug lite 检查了代码，并将其复制到 fiddle 这样我就可以重新确定我做错了什么......但它不起作用。

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

HTML在这里，CSS太长了，这里就不抄了。它在 fiddle

<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-Rules.. 我把它们都包含在这个 JSFiddle 中：https://jsfiddle.net/xjo4qvmc/1/

当然你还必须将相对路径更新为绝对路径

background: url(http://couchdb.apache.org/image/sprite.png) no-repeat;

Answer 2

只需将 top: 80px; 添加到 img.

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

您可能还想在换行中添加除静态以外的位置，因为您在 img 上使用的 position:absolute 和文本块是相对于下一个 non-static 定位的父元素的。

Firebug lite-无助于白色位置

Firebug lite-not helping whit position

css

firebug