Question

我想要并排显示2张图片，上面的标题是超链接的一部分。

  <div id="image">

  <a href="file:///L:/file" style="text-decoration:none;"  Title="Project Reports">
  <p>New Reports</p>
  <img src="http://tableau/" style="width:304px;height:228px;" /> 
  </a>       


  <a href="file:///L:/file2" style="text-decoration:none;" >
  <p>Project Reports</p>
  <img src="http://tableau/" style="width:304px;height:228px;"/>
  </a>

如果删除标题周围的p标记，它会显示内联，但我需要标题位于图像顶部。

CSS：

  #image {
  display: inline-block;
  float: left;
  }

Answer 1

在float:left;

中添加a

＆＃13;

#image {
  display: inline-block;
  width:1000px;
  clear:both;
}
#image > a{
  float: left;
  display:inline-block;
}

＆＃13;

<div id="image">
  <a href="file:///L:/file" style="text-decoration:none;"  Title="Project Reports">
  <p>New Reports</p>
  <img src="http://tableau/" style="width:304px;height:228px;" /> 
  </a>       
  <a href="file:///L:/file2" style="text-decoration:none;" >
  <p>Project Reports</p>
  <img src="http://tableau/" style="width:304px;height:228px;"/>
  </a>

＆＃13;

Answer 2

下面。适当的HTML和CSS。

a {
  display: inline-block;
 text-decoration: none;
  }

<div id="image">
 <a href="file:///L:/file" title="Project Reports">New Reports<br>
  <img src="http://tableau/" style="width:304px;height:228px;" /> 
  </a>      


  <a href="file:///L:/file2">Project Reports<br>
  <img src="http://tableau/" style="width:304px;height:228px;"/>
  </a>
</div>

如何使用HTML / CSS内联显示图像和标题？

2 个答案: