列表是
<a><a>缩略图栏 |术语专栏 |描述栏 <-- header
thumbnail_1 |术语_1 |描述_1 <-- all row is one "link_1"
thumbnail_2 |术语_2 |描述_2 <-- all row is one "link_2"
<ul>
<li>
<div>thumbnail column</div>
<div>term column</div>
<div>description column</div>
</li>
<li>
<a href="link_1">
<img src="src_thumbnail_1" alt="thumbnail_1">
<div>term_1</div>
<div>description_1</div>
</a>
</li>
<li>
<a href="link_2">
<img src="src_thumbnail_2" alt="thumbnail_2">
<div>term_2</div>
<div>term_3</div>
</a>
</li>
</ul><html>
<head>
<style>
ul {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
ul li a {
width: 200px;
}
ul li {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
ul li.body {
align-items: center;
}
ul li.body img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<ul>
<li class="header">
<a>thumbnail column</a>
<a>term column</a>
<a>description column</a>
</li>
<li class="body">
<a><img src="" alt="thumbnail_1"></a>
<a>term_1</a>
<a>description_1</a>
</li>
<li class="body">
<a><img src="" alt="thumbnail_2"></a>
<a>term_2</a>
<a>description_2</a>
</li>
</ul>
</body>
</html>