HTML：文本在同一地點

我的圖像說明了一切。

在＃1截圖是怎麼回事，現在

在＃2是我希望它是

我怎樣才能做到這一點？

這裏是我當前的HTML：

<div> 
<span style='float: left; margin: 10px; width: 60px; display: block;'> 
<img style='border: 1px solid #FFF; width: 61px; height: 80px;' src='images/profilePhoto/thumbs/104.jpg'> 
<br>Rafo O. 
</span> 
<h1>(inget ämne)</h1> 
<div> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla urna eget urna euismod aliquet. Duis porta volutpat blandit. Phasellus bibendum bibendum porta. Nunc molestie tristique leo, sed euismod orci ultricies vitae. Mauris non libero a leo ultricies laoreet. Suspendisse luctus urna vel sapien tristique vitae semper nulla eleifend. Integer congue aliquam pharetra. Phasellus diam neque, tincidunt vel elementum vel, ornare sit amet mi. Nulla tincidunt purus in odio vulputate mollis. Nunc urna odio, rutrum eu ultricies a, facilisis ullamcorper nunc. In purus velit, varius vel laoreet eu, tincidunt non purus. Nulla facilisi. Sed ac lectus nibh. Praesent non velit nibh.<br /> 
........ 
</div> 
<p style='float: right; color: grey; font-weight: bold;'>1-11-2010 kl. 13:28</p></div> 
<div class='clearfloat'></div>

來源

2010-11-02 Johnson

只是一個側面說明，你可以考慮使用Firebug動態地用你的CSS樣式來測試答案。 – 2010-11-03 00:09:42

@Michael毛，怎麼樣？ – Johnson 2010-11-03 00:11:54

只需獲取Firefox並安裝其插件Firebug，然後檢查要調試的元素，然後將更改應用於其CSS樣式，如答案中所示。谷歌擁有你需要的一切。 – 2010-11-03 00:13:45

添加保證金到文本的左側：

<div style="margin-left:100px;"> 
    <h1>(inget ämne)</h1> 
    <div> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...] 
    </div> 
</div>

你應該考慮unobstrusive CSS和移動你的風格你的標記（使用外部文件）。

來源

2010-11-03 00:03:28 jwueller

HTML：文本在同一地點

回答

相關問題