HTML Frage

Push-Nachrichten von MacTechNews.de

Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?

Forum>Entwickler>HTML Frage

breaker10.05.1019:21

Es geht um folgendes: Drei Spalten nebeneinander.
280x3 (Spaltenbreite) + 2x20px (Steg) = 880 Pixel

Müsste also nebeneinander passen. Wenn ich die DIV-Blöcke (Spalte 1-3) in eine Zeile packen, passt es auch. Der Ordnung und der späteren Übersicht halber wollte ich sie wie unten zu sehen untereinander packen. Der Browser interpretiert das aber als ein Leerschritt zwischen den Spalten, also rutscht die dritte Spalte nach unten (Safari und Firefox).

Hat jemand eine Idee, wie ich das lösen kann? Also das das vom Browser interpretierte Leerzeichen verschwindet.

<div style="margin-top: 40px; width: 880px;">
<div class="spalte1">Spalte 1</div>
<div class="spalte2">Spalte 2</div>
<div class="spalte3">Spalte 3</div>
</div>

.spalte1
    {
    width: 280px;
    margin-left: 0px;
    position: relative;
    display:inline-block;
    zoom: 1;                /*nasty IE 7 Workaround*/
    *display: inline;        /*nasty IE 7 Workaround*/
    vertical-align: top;
    background: red;
    }

.spalte2
    {
    width: 280px;
    margin-left: 20px;
    position: relative;
    display:inline-block;
    zoom: 1;                /*nasty IE 7 Workaround*/
    *display: inline;        /*nasty IE 7 Workaround*/
    vertical-align: top;
    background: red;
    }

.spalte3
    {
    width: 280px;
    margin-left: 20px;
    position: relative;
    display:inline-block;
    zoom: 1;                /*nasty IE 7 Workaround*/
    *display: inline;        /*nasty IE 7 Workaround*/
    vertical-align: top;
    background: red;
    }

Danke

Kommentare

kcnb810.05.1019:57

Lasse die Spalten links floaten, siehe hier:

.spalte1 {width:280px;background:red;float:left}
.spalte2 {width:280px;margin-left:20px;background:red;float:left;}
.spalte3 {width:280px;margin-left:20px;background:red;float:left;}

Dann passt das auch mit den Div-Tags untereinander.

„"Life on Earth may be quite expensive, but it includes a free annual trip around the sun." - Ashleigh Brilliant“

breaker10.05.1020:04

Danke.
Wie lautet jetzt noch mal der Trick, dass der dahinter liegende Seiten-Wrapper wieder wie zuvor mit nach unten läuft? Also mit der Höhe der Spalten mitwandert?

#wrapper
    {
    width: 880px;
    padding: 0px 60px 0px 30px;
    margin: 0px auto;
    text-align: left;
    position: relative;
    background: #f7c9dd;
    }

<br clear="all"> oder, gibts da auch eine schönere CSS Variante?

kcnb810.05.1020:11

#wrapper{
width: 880px;
padding:30px;
margin: 0px auto;
text-align: left;
position: relative;
background: #f7c9dd;
overflow:auto;
}

„"Life on Earth may be quite expensive, but it includes a free annual trip around the sun." - Ashleigh Brilliant“

kcnb810.05.1020:16

Achso, und natürlich die Pflichtlektüre: (Selfthtml)

„"Life on Earth may be quite expensive, but it includes a free annual trip around the sun." - Ashleigh Brilliant“

breaker10.05.1020:39

Jau, danke dir.

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.

Das MacBook Pro M4

Thunderbolt 5 am M4-Mac: Erstes Dock hinterläss...

Doch keine finalen Versionen: Apple gibt zweite...

iPad Pro M4: Hinweise auf geringere Nachfrage

Bald viel mehr HomeKit-kompatible Geräte? Apple...

Apple gewährt Einblick in Audio- und Video-Test...

iOS 18.1 veröffentlicht

Mac OS X: 25 Jahre Aqua, 25 Jahre Dock