Höhe 100% bei SPAN mit mehreren Spalten

Question

Ich habe den folgenden Code mit 3 Spalten. Ich möchte den Rand jeder Spalte haben und jede Spalte hat auch ihre eigene Farbe. Ich habe viele frühere Beispiele für mehrspaltige CSS-Probleme ausprobiert und sie funktionieren nicht. Ich möchte zum Beispiel nicht den schmutzigen Trick mit dem Hintergrundbild verwenden, um die Hintergrundfarbe und den Rahmen zu rendern, weil die Website es erlaubt, die Farbe zu ändern. Ich kann auch nicht die Methode verwenden, bei der ein dicker Rahmen als Farbe verwendet wird und dann ein negativer Rand mit relativer Positionierung eingesetzt wird. Diese Methode lässt keinen Rahmen zu. Unten ist der Code. Was ist der beste Weg? Vielen Dank

<div id="results" style="display:block;float:left;width:210px;border:1px solid black;">
 <span id="left" style="display:block;float:left;width:140px;border-right:1px solid black;">This is a long text and can be wrap to many lines</span>
 <span id="middle" style="display:block;float:left;width:30px;border-right:1px solid black;">3:32</span>
 <span id="right" style="display:block;float:left;width:30px;">Click</span>
</div>

Answer 1

Warum nur alle Spannen hinzufügen height: 100%; und oberer Bereich height: auto; ?

Übrigens bin ich mir ziemlich sicher, dass span con display:block; est div .

BTW2: Der Table-Tag ist nicht verboten - wenn Sie eine Tabelle mit "Tabellendaten" benötigen (wie z.B. einen Zeitplan), sollten Sie ihn verwenden ;) Nicht, wenn Sie das Layout der gesamten Website erstellen...

Answer 2

<div id="results" style="height:150px;float:left;width:210px;border:1px solid black;">
<span id="left" style="height:auto !important;height:100%;min-height:100%;float:left;width:140px;border-right:1px solid black;">
This is a long text and can be wrap to many lines
</span>
<span id="middle" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;border-right:1px solid black;">
3:32
</span>
<span id="right" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;">
Click
</span>
</div>

Das einzige Problem ist, dass der Container eine bestimmte Höhe haben muss.

Answer 3

Wie MaRiz sagte, sollten Sie in diesem Fall eine Tabelle verwenden und die CSS-Eigenschaft: border-collapse: collapse einstellen;