html - 如何设置图标旁边的列表和段落的样式？

Question

这就是我要实现的目标:

我正在使用表格，因为我有多个这样的单元格。我需要的是:

• 段落(处理器)在图标旁边对齐

• 在段落下方和图标旁边对齐的无序列表

• 行与单元格底部对齐

• 相同大小的单元格

到目前为止我有:

<td width="275" height="140" class="bottom">
    <img src="http://imagehost.cz/images/1h636n4fs7e57jqrwk9.png" />
    <p>Procesor</p>
    <ul>
        <li>Description</li>
    </ul>
    <img src="http://imagehost.cz/images/kuovfjbxatq5vovthqje.png" id="line"/>
</td>

CSS 是:

.bottom {vertical-align: bottom;}
#line {display: block;margin: auto;}

我知道这可能是一些菜鸟的错误，但我是新手，我正在学习 反复试验。

Answer 1

已更新您的代码。试试这个。 Working Fiddle

.bottom {
background:#f9f9f9;
padding:10px;
width:275px;
display:block;
min-height:140px;
border-bottom:2px solid #000;
}
#line{
display:block;
margin:auto;
}
img{
display:inline-block;
vertical-align:middle;
}
p{
display:inline-block;
margin:0;
}
ul{
display:block;
margin: 5px 0 10px 10px;
font-size:12px;
color:#333;
font-family:Arial;
}