So positionieren Sie drei div-Elemente nebeneinander über eine Webseite

7

Hi, ich versuche eine Website zu erstellen, die einen 'div container' hat und in diesem div drei Hauptspalten, 'div left', 'div middle' und 'div right'.

Ich habe versucht, die Breite für jede Spalte auf 25%, 50% und 25% zu setzen - floating alle divs links - mit zwei Bildern auf jeder Seite der Tabelle (div middle). Leider sind die drei divs auf getrennten Linien statt nebeneinander. Hat jemand dafür irgendwelche Tipps oder Ratschläge? Jede Hilfe wäre willkommen.

Hinweis: Das mittlere div (das die Tabelle enthält) wird gefüllt, wenn Ereignisse hinzugefügt werden.

%Vor%     
Joshua 03.01.2013, 22:15
quelle

3 Antworten

14
%Vor%

Es gibt kein Float: center. Indem sie alle nach links schweben, werden sie sich nebeneinander stellen.

    
corymathews 03.01.2013, 22:18
quelle
5

Ein paar Dinge gehen hier vor.

<div> ist ein Element auf Blockebene. Das heißt, standardmäßig erhalten Sie nach jedem einen Zeilenumbruch. (Das CSS wäre display: block ).

Sie können dafür sorgen, dass keine Zeilenumbrüche ausgeführt werden, aber behalten Sie ihre Abstandscharakteristik bei:

%Vor%

Dadurch werden sie inline angezeigt, lassen aber den vertikalen Abstand zu, als wären sie Elemente auf Blockebene.

Sie hatten Recht, float zu versuchen, aber aufgrund der Funktionsweise des CSS-Box-Modells Jedes margin - oder border -Attribut bewirkt, dass sie größer als die von Ihnen angegebenen Prozentsätze sind. (Bearbeiten: verpasst float: center - das ist nicht vorhanden. Es ist right oder left für float .)

Sie könnten versuchen, auch Breiten zu spezifizieren, die weniger als 100% ergeben, wenn Sie sie weiterhin schweben lassen wollen.

    
tkone 03.01.2013 22:20
quelle
2

Wenn Sie IE7 nicht unterstützen müssen, brauchen Sie nichts zu bewegen. Angesichts dieses Markups:

%Vor%

Dieses CSS gibt Ihnen drei Spalten 25% / 50% / 25%:

%Vor%

Demo .

    
robertc 03.01.2013 22:48
quelle

Tags und Links