`ĴsFiddle Demo`

Question

我想实现这样的目标：

|-----------|     |-----------|     |-----------|
|           |     |           |     |           | 
|  image    |     |  image    |     |  image    |
|           |     |           |     |           |
|-----------|     |-----------|     |-----------|
   image 1           image 2           image 3

应该并排显示图像，并且每个图像下都应该有关于这些图像的描述。我尝试将每个图像放在自己的＆＃34; div＆＃34;标签和使用的显示：css的内联属性，但上面的格式没有显示。

Answer 1

HTML5引入了figure元素，该元素用于将图片及其标题与figcaption相关联。

<figure>
    <img src="path/to/your/image" width="150px" height="150px" />
    <figcaption>First image</figcaption>
</figure>

要并排获得数字，请使用css

figure {
    display:inline-block;
}

并将图像置于图像下方

figcaption {
    text-align: center;
}

有关3个虚拟图像的示例，请参阅http://jsfiddle.net/TSWND/1/

Answer 2

你可以做这样的事情

`ĴsFiddle Demo`

CSS

.container{
    width: 150px;
    margin-left: 10px;
    float: left;
}
img{
    width: 150px;
    height:150px;
    float: left;
}
.text{
    text-align:center;
}

Answer 3

你需要创建带有两个孩子的div容器：div你有img和另一个div有文本。添加适当的宽度和float: left.这应该有帮助

编辑：小提琴：fiddle

Answer 4

使用div

display:block;
float:left;

Answer 5

在中间DIV中使用float：left in css

<div>

   <div> image code</div>// <-- use here float left
   <div> discription code </div>//<-- use here float left
</div

Answer 6

U也可以使用

<figure>
<img src="">
<legend></legend>
</figure>

使用此结构包含元素，将每个图形元素向右或向左浮动，然后使用clear：两种样式添加div。

Answer 7

最简单的解决方案：

<style type="text/css">
   #container{
   height:100%;
   width: 100px; 
}
</script
<body>
<div id="container">
<img id="a" src="" height="100" width="100" ></img><br /><p> this is text1</p><br />
<img id="b" src="" height="100" width="100" ></img><br /><p> this is text2</p><br />
<img id="c" src="" height="100" width="100" ></img><br /><p> this is text3</p><br />
<img id="d" src="" height="100" width="100" ></img><br /><p> this is text4</p><br />
</div>
</body

在src中你放了你的图像源，我留空了，记住图像的宽度不应超过容器的宽度。

如何使用HTML和CSS并排放置图像和文本？

7 个答案:

`ĴsFiddle Demo`

CSS