使用align =“right”在图像下粘贴图像标题

时间:2013-12-04 09:05:39

标签: html css image

我不知道如何很好地制定这个,但我的问题是我有一个用文字包裹的图像,我需要在该图像下的标题。我会尝试用图片解释

enter image description here

图片有此代码;

<img src="../assets/img/fotos/nieuws/nieuwsbericht3.jpg" align="right" width="280px" height="150px">

我怎样才能获得

<div align="right" style="font-size: 8px">Schetsimpressie La Dolce Villa III, start verkoop 2de kwartaal 2014</div>

进入它下面?

这是它的整个代码;

 <img src="../assets/img/fotos/nieuws/nieuwsbericht3.jpg" align="right" width="280px" height="150px">
            <div align="right" style="font-size: 8px">Schetsimpressie La Dolce Villa III, start verkoop 2de kwartaal 2014</div>
            Bovendien start in het tweede kwartaal van 2014 ook nog eens de verkoop van zes halfvrijstaande en twee vrijstaande woningen in La Dolce Villa III, de laatste fase in deze groene leef- en woonomgeving aan de rand van Gemert. 
            Alle woningen worden gerealiseerd op basis van Persoonlijke Huisvesting, dus met volledige vrijheid voor de kopers als het gaat om afwerking, indeling en extra's van de woning. 
            Je stelt daarmee kopers in staat om zelf hun woning voor het overgrote deel vorm te geven."

现在看起来很喜欢这个 enter image description here

对不起,我很抱歉。

2 个答案:

答案 0 :(得分:2)

Align已弃用div,您应该使用CSS来实现此目的。

<强> JSFiddle

试试这个CSS:

.right-image {
    float: right;
}
.caption {
    font-size: 8px;
}

然后这个HTML:

<div class="right-image">
    <img src="../assets/img/fotos/nieuws/nieuwsbericht3.jpg" width="280px" height="150px">
    <div class="caption">Schetsimpressie La Dolce Villa III, start verkoop 2de kwartaal 2014</div>
</div>
<div>
    Bovendien start in het tweede kwartaal van 2014 ook nog eens de verkoop van zes halfvrijstaande en twee vrijstaande woningen in La Dolce Villa III, de laatste fase in deze groene leef- en woonomgeving aan de rand van Gemert. 
    Alle woningen worden gerealiseerd op basis van Persoonlijke Huisvesting, dus met volledige vrijheid voor de kopers als het gaat om afwerking, indeling en extra's van de woning. 
    Je stelt daarmee kopers in staat om zelf hun woning voor het overgrote deel vorm te geven.
</div>

答案 1 :(得分:0)

several ways来实现这一目标,范围从纯HTML

<table align=right>
<caption align=bottom>caption text</caption>
<tr><td><img ...>
</table>

到现代主义的HTML5 + CSS

<style>
figure { margin: 0: float: right }
</style>
...
<figure>
  <img ...>
  <figcaption>caption text</figcaption>
</figure>