html - 如何将我的 div "downloads"始终放在图片下方 70px

Question

我想把我的 <div id="downloads">总是比我的图片低 70 像素，但我没有成功。

如果我的文字有很多字并且有我的图像的高度，它工作正常。

但是当我的文字较小，并且没有图像的高度时，它就不能正常工作了，我的 <div id="downloads">出现太多并且与我的段落相关有 70px。但我想要与我的形象有关。

你知道我怎么定位我的 <div id="downloads"> 吗？关于我的形象，总是有margin-top:70px;我的形象？

这是我对我所做的和我拥有的东西的摆弄: http://jsfiddle.net/p95EN/2/

这就是我要找的:

我的 html:

    <div class="modal">
    <h2>title</h2>
    <span id="date">date</span><br />
    <img class="img" src="uploads/news/image1.png"/>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
    <div id="downloads">
        <h3>Downloads:</h3>
        <ul class="links">
            <li><a href="">Link 1</a></li>
            <li><a href="">Link2</a></li>
        </ul>
    </div>
    <span>Back</span>
</div>

我的CSS:

.modal
{   
    text-align:center;
    width:100%;
    margin:0 auto 0 auto;
    background:#fff;
}

.modal .img 
{
    width:200px;
    height:220px; 
    float:left;
    margin-right:10px;
    border:3px solid green;
    margin-top:15px;
}

.modal #date
{
    width:100%;
    color:#ccc;
    font-size:14px; 
    text-align:center;
    color:#7a7a7a;
}


.modal h2
{
    width:100%;
    color:green;
    font-size:23px; 
    text-align:center;

}

.modal p
{
    font-size: 17px;  
    text-align:justify;
    line-height:25px;
    word-spacing:-2px;
    width:100%;
    margin-top:15px;
}

#downloads
{
    margin-top:70px;
}

#downloads h3
{
    color:#444;
}

.links 
{
    list-style-type:none;
    margin:0 auto; 
    display:table;
}


.links li
{
     text-align : left;
}

.links li a>i
{
     color:#444;
}


.links li a 
{
    text-decoration:none;
    color:#000;
    margin:0 auto; 
    margin-top:10px;
    display:inline-block;
}

Answer 1

尝试更改 CSS 中的以下类:

 #downloads { clear: both; text-align: center; display: block; width: auto; margin-top: 70px; }