无法将图像固定在TD标签的顶部

时间：2016-03-10 09:34:04

标签： html html5 css3

我要求在表格中放置图像和图像内容。问题是我的图像内容很长，我在td标签中丢失图像位置的抓地力，图像在中心处定居。可以有人请通过查看下面的代码帮助我解决这个问题

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans two rows:</h2>
<table style="width:100%">
 
  <tr>
    <th rowspan="2"><article>“Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain competitors may be the only sustainable competitive advantageSpectacular MountainSpectacular Mountain.”
… Arie De Geus, former head of Strategic Planning at Royal Dutch Shell.

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain.</p>

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain.</p> 

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain.</p>

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain!</p>
Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain.

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain<p><br>

<br>

- Spectacular Mountain<br>
Spectacular Mountain<br>
<br>
mycompay@microsoft.com<br>
 </article></th>
    <td>
	<table>
	   <tr>
	     <td><h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:115px;height:115px;"> </td>
		 
	   </tr>
	</table>
	</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

</body>
</html>

3 个答案:

答案 0 :(得分：1)

这应该有用，假设你想要＆＃34;山景＆＃34;细胞顶部对齐。

td.image {
  vertical-align:top;
}

答案 1 :(得分：0)

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}

</style>
</head>
<body>

<h2>Cell that spans two rows:</h2>
<table style="width:100%">
 
  <tr>
    <th rowspan="2"><article>“Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain competitors may be the only sustainable competitive advantageSpectacular MountainSpectacular Mountain.”
… Arie De Geus, former head of Strategic Planning at Royal Dutch Shell.

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain.</p>

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain.</p> 

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain.</p>

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain!</p>
Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain.

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain<p><br>

<br>

- Spectacular Mountain<br>
Spectacular Mountain<br>
<br>
mycompay@microsoft.com<br>
 </article></th>
    <td style="vertical-align: top;">
	<table>
	   <tr>
	     <td><h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:115px;height:115px;"> </td>
		 
	   </tr>
	</table>
	</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

vertical-align:top将解决问题

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left; 
    vertical-align:top;
}
</style>
</head>
<body>

<h2>Cell that spans two rows:</h2>
<table style="width:100%">
 
  <tr>
    <th rowspan="2"><article>“Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain competitors may be the only sustainable competitive advantageSpectacular MountainSpectacular Mountain.”
… Arie De Geus, former head of Strategic Planning at Royal Dutch Shell.

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain.</p>

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain.</p> 

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain.</p>

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain!</p>
Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain.

<p>Spectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular MountainSpectacular Mountain<p><br>

<br>

- Spectacular Mountain<br>
Spectacular Mountain<br>
<br>
mycompay@microsoft.com<br>
 </article></th>
    <td>
	<table>
	   <tr>
	     <td><h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:115px;height:115px;"> </td>
		 
	   </tr>
	</table>
	</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题