html - 我怎样才能把它变成列表元素中的两列布局？

Question

<ul>
<a href="/blah"><li><img src='/profile.jpg'><span>Name</span><span>Address</span></li></a>
</ul>

我想要两列，左列中的图像跨越两行，右列中的文本位于图像右侧的上下一行。

我尝试将 div 与蓝图 css 一起使用，但 anchor 标记以一种奇怪的方式显示 - 它似乎没有包含悬停时的整个列表元素，而是一个条子。

我也尝试过表格布局，但因为我无法用 CSS 很好地控制填充，所以它看起来很笨重。

我怎样才能把它变成列表元素中的两列布局？

Answer 1

您的一些 HTML 无效，所以我冒昧地清理了其中的一些。像这样的东西应该适合你:

<ul>
    <li>
        <div>
            <span class="item-container"><a href="/blah"><img src="blah.jpg" /></a></span>
            <div class="item-container">
                <span class="item">Name</span>
                <span class="item">Address</span>
            </div>
        </div>
    </li>
</ul>

CSS:

.item {float:left; clear:left;}
.item-container {float:left;}

根据需要添加边距/填充。

工作样本:http://jsfiddle.net/andrewwhitaker/KUaCE/