html - 试图将我的

Question

我想做点什么，但我不知道是否可行。

我有一个用于台式机和平板设备的 html 结构，它工作正常，但现在对于移动设备，我想稍微改变一下我的新闻结构。

在移动版中，我想输入我的 <h1>Title of the news</h1>在图像上方，但它出现在图像下方，因为在我的 html 中我首先有标题图像，但我不想更改我的 html 结构，不可能仅使用 CSS 将我的标题放在图像上方？

我正在尝试一些测试，但没有任何效果!

我把我的例子放在这个 fiddle 里:

http://jsfiddle.net/Zkpj7/

为了更好地理解，我用这张图片来展示我想要的东西:

Answer 1

尝试像这样更改 CSS:

#news
{
    height:140px; 
    margin-bottom:5px; 
    border-bottom:1px solid #f3f3f3;
    padding-bottom:43px;    
    position:relative;
    padding-top: 45px; /*CHANGE VALUE ACCORDING TO YOUR NEEDS*/
}

#news h2 {
    position: absolute; top: 0px; left: 0px; /*ABSOLUTE POSITIONING*/
    margin: 0px;
}

#news span 
{
    color:#7a7a7a;
    position: absolute; top: 25px; left: 0px; /*ABSOLUTE POSITIONING*/
}

我想不出不使用绝对定位的好的解决方案...

不过我真的会建议更改标记 :p

http://jsfiddle.net/Zkpj7/9/