我怎么能把我的div“下载”总是低于我的图像70px

Question

我试图让我的<div id="downloads">总是比我的图像低70px，但我没有成功这样做。

如果我的文字有很多单词并且图像高度很高，那就可以了。

但是当我的文字较小，并且没有我的图像的高度，它没有正常工作，我的<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; }