Question

我有一个问题。我想制作一些图片（左，中，右），下面有文字......这就是我想要做的事情

[image]     [image]     [image]
[text]      [text]      [text]

这是我目前的代码：

<img src="">
<p>Some Text</p>
<img src="" style="margin-left:150px;">
<p>Some Text</p>
<img src="" style="margin-left:300px;">
<p>Some text</p>

Answer 1

您可以使用HTML标记figure和figcaption来实现此目的，然后将数字浮动到左侧以获得您想要达到的效果。

<强> HTML

<figure>
    <img src="deadlink.jpg" alt="noimg" />
    <figcaption>Caption goes here</figcaption>
</figure>

<figure>
    <img src="deadlink.jpg" alt="noimg" />
    <figcaption>Caption goes here</figcaption>
</figure>

<figure>
    <img src="deadlink.jpg" alt="noimg" />
    <figcaption>Caption goes here</figcaption>
</figure>

<强> CSS

figure {
  position: relative;
  float: left;
}

工作示例：

http://codepen.io/anon/pen/BLGaQp

Answer 2

这样做：

<img src="" align="bottom"
  height="xxx" width="xxx" />
<img src="" align="bottom"
  height="xxx" width="xxx" />
<img src="" align="bottom"
  height="xxx" width="xxx" />

应该工作......

或者你这样做：

HTML：

<div id="blabla">
 <img src="" style="width:50%;"><br>
 <p>Text</p>
</div>

的CSS：

#blabla {
width:50%;
height:auto;
min-height:50px;
}

在图像下添加文本（左，中，右）

2 个答案: