如何將它變成列表元素中的兩列布局？

Question

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

我想有兩列，左欄中的圖像跨越兩行，右上角的文本在圖像的右下方。

我試着用藍圖css使用div，但隨後錨標記以奇怪的方式顯示 - 它似乎並不包含懸停上的整個列表元素，而是包含一個條子。

我也嘗試過使用表格佈局，但是因爲我無法很好地控制填充CSS，所以看起來很笨重。

如何將它變成列表元素中的兩列布局？

Answer 1

上的所有元素使用float:left，還需要浮動的適當高度

Answer 2

一些你的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/