html - 用无序列表替换表格

Question

我需要删除表格的使用并将代码替换为 HTML 列表(<ul> 和 <li>)。需要替换的HTML代码如下

<table>  
     <tr>  
         <td>  
            <img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" />  
        </td>  
        <td>  
            <table>  
                <tr><td>John Smith</td></tr>  
                <tr><td>24 years</td></tr>  
                <tr><td>Chicago</td></tr>  
            </table>  
        </td>  
    </tr>  
</table>  

使用列表尝试了多个选项，但无法实现此显示。右边的文本总是在使用列表的图像下方，我希望垂直文本列表(名称，然后是年龄，然后是城市)与图像相邻，即列表应该产生与上表相同的形状。

请告诉我如何通过带有 HTML 列表的 CSS 完成此操作。

Answer 1

你可以试试这样的东西

<style>
.profile li{
    float: right;
    clear: right;
}
.profile .image{
    float: left;
    clear: none;
}
</style>
<ul class="profile">
    <li class="image"><img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" /></li>
    <li>John Smith</li>
    <li>24 years</li>
    <li>Chicago</li>
</ul>