2010-11-25 12 views
0

Ich habe eine skinny CSS-Klasse, die keinen Spielraum, Klotzen oder Rand hat:Wie ändert man dieses Tabellenlayout in ein CSS-Layout?

.skinny 
{ 
    margin:0 0 0 0; 
    padding:0 0 0 0; 
    border:0 0 0 0; 
} 

Und I angewandt, es zu einer Zeile ein Bild enthält, die auch die skinny Klasse angewandt wird:

<td width="33%" align="center" class="skinny"> 
    <table width="400px" height="180px" class="skinny"> 
     <tr class="skinny"> 
      <td class="skinny" width="60px" height="100px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></td> 
      <td class="skinny" width="120px" height="100px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></td> 
     </tr> 
    </table> 
</td> 

Ich versuche, das Bild so nah wie möglich an den Text <h1> in der nächsten Zelle zu bringen, so dass sie von links nach rechts gegeneinander geschoben werden.

Aber egal wie viele Elemente ich die skinny Klasse anwenden, es scheint so etwas wie eine 'Auffüllung' um jede der Tabellenzellen zu geben, die einen Abstand zwischen dem Bild und dem Text schafft.

Was müsste ich tun, um dies zu einem CSS-Layout zu machen, das das Bild direkt auf die linke Seite des Textes bringt, ohne Leerzeichen zwischen ihnen?

Ich versuchte dies:

<td width="33%" align="center" class="skinny"> 
    <div class="skinny" width="60px" height="100px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></div> 
    <div class="skinny" width="120px" height="100px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></div> 
</td> 

Aber es setzt das Bild auf dem Text.

+0

Müssen Sie nicht '0px' anstelle von' 0' schreiben? – thejh

+2

@thejh: nein. Null ist Null. '0px' ist das gleiche wie' 0em' oder '0cm', also können Sie (und sollten wohl) einfach' 0' schreiben. –

+0

@Paul D. Waite: ah, ok – thejh

Antwort

0

Ändern Sie im Originallayout die Breite des zweiten td in *. Was passiert, ist, dass die Tabelle und damit die Zeile eine feste Breite hat, die ausgefüllt werden muss, und die Layout-Engine teilt sie zwischen den Zellen.

Wenn Sie die divs verwenden möchten, dann wie Sebastian sagt, verwenden Sie display: inline-block.

+0

Bingo! Der Stern hat funktioniert! Würden Sie mir bitte erklären, was das ist? :) Sagt es "nimm, was noch übrig ist nach dem ersten td"? –

+0

Versuchen Sie nicht, die Geheimnisse des heiligen Sternchens zu durchdringen! –

+0

Aber, äh, ja. Genau das. –

2

Versuchen

table.skinny { border-collapse:collapse; } 

EDIT: Wenn Sie ein einsames Bild in einem td haben, display:block loszuwerden, das Abseilgerät Raum bekommen.

Auch können Sie verwirren mit dem line-height des h1 und es 1 oder etwas gesetzt.

0

dies alles tun, das tut?

table.skinny { 
    border-spacing: 0; 
} 

Und obwohl es Wegthema, haben mehrere Nullen die gleiche Wirkung wie nur eine Null:

.skinny 
{ 
    margin: 0; 
    padding: 0; 
    border-style: none; 
} 
0

Versuchen

.skinny { float: right }

Verwandte Themen