Wie kann ich dies innerhalb des Listenelements in ein zweispaltiges Layout umwandeln?

Question

Ich möchte zwei Spalten mit dem Bild in der linken Spalte über zwei Zeilen und den Text in der rechten Spalte in einer oberen und unteren Reihe auf der rechten Seite des Bildes haben.

Ich habe versucht, divs mit Blueprint css, aber dann das Anker-Tag wird auf eine seltsame Weise angezeigt - es scheint nicht das gesamte Listenelement auf Hover umfassen, sondern stattdessen ein Splitter.

Ich habe auch versucht mit einem Tabellenlayout, aber weil ich die Auffüllung mit CSS nicht gut kontrollieren kann, sieht es sperrig aus.

Wie kann ich dies innerhalb des Listenelements in ein zweispaltiges Layout umwandeln?

Answer 1

Verwendung float:left auf alle Elemente, muss auch Schwimmer für die richtige Höhe

Answer 2

Einige Ihrer HTML ist ungültig, also habe ich die Freiheit, die Reinigung etwas davon nach oben genommen. So etwas sollte für Sie arbeiten:

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

hinzufügen Margen/padding wie nötig.

Arbeitsprobe: http://jsfiddle.net/andrewwhitaker/KUaCE/