Замена таблиц неупорядоченными списками

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>  

Пробовал несколько вариантов с использованием списков, но не смог добиться этого отображения.Текст справа всегда шел под изображением с помощью списков, я хотел, чтобы вертикальный текстовый список (имя, возраст, город) был смежным с изображением, т.е. список должен иметь ту же форму, что и приведенная выше таблица.1006 *

Пожалуйста, дайте мне знать, как это можно сделать через CSS со списками HTML.

Answer 1

Вот пример на jsFiddle, который содержит требуемое решение ...

http://jsfiddle.net/ZHbxr/16/

Вам необходимо отметить parent <ul> display as table и inner <li> display as table-cell

Answer 2

Вы можете попробовать что-то вроде этого

<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>

Answer 3

Для этого вы можете использовать свойство display: table для этого.Напишите так:

CSS

.profile > li{
    display:table-cell;
}

.profile{
    display:table;
}

HTML

<ul class="profile">
    <li><img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" /></li>
    <li>
        <ul>
            <li>John Smith</li>
            <li>24 years</li>
            <li>Chicago</li>
        </ul>
    </li>
</ul>

Проверьте это http://jsfiddle.net/GCfSx/1/

Answer 4

Для этого есть много учебников. Продолжайте поискать в Google или попробуйте на w3schools.com.

или может быть проверить это: http://www.javascriptkit.com/script/script2/verticalmenu.shtml