Zwei Kästchen, nebeneinander, jeweils 50%, aber beide sind etwas länger und nicht auf der gleichen Linie?

Question

Zwei Kästchen, nebeneinander, jeweils 50%, aber beide sind etwas länger und nicht auf der gleichen Linie?

8

Ich versuche, zwei Side-by-Side-Boxen zu bekommen, die die gesamte Breite des Bildschirms einnehmen. Wenn Sie jedoch die Breite auf 50% einstellen, möchte jedes der Kästchen etwa 10 Pixel breiter als 50% sein. Was mache ich falsch?

%Vor%

. . .

%Vor%

html css width

DrewK 09.06.2015, 18:07

quelle

5 Antworten

Tags und Links html css width

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Mongoose enum Validierung für String Arrays?

score 5 · Answer 1

5

Beide Seiten müssen floating sein und sicherstellen, dass box-sizing: border-box; verwendet wird, um sicherzustellen, dass die Breite 50% beträgt, unabhängig von der Füllung und der Rahmengröße.

arjabbar 09.06.2015 18:10

quelle

score 5 · Answer 2

Sie brauchen nicht , um float zu verwenden (es ist nicht wirklich das richtige Werkzeug für das gesamte Dokumentlayout; es ist eher für das Auflösen von Text mit Bildern, ohne den Dokumentenfluss zu zerstören).

Sie können dies mit weniger CSS erreichen, indem Sie display: inline-block; verwenden und den Leerraum zwischen Ihrem linken und rechten <div> s auskommentieren. JSFiddle

%Vor% %Vor%

score 4 · Answer 3

4

Mir ist klar, dass Ihre Frage bereits gelöst wurde, aber eine andere Lösung für TylerH wäre Flex. Wie so:

%Vor% %Vor%

Wie TylerH zu Recht bemerkt hat, erfordert dies moderne Browser. Weitere Informationen zur Kompatibilität finden Sie auf der Website .

jaunt 09.06.2015 18:34

quelle

score 0 · Answer 4

0

Verwenden Sie display: inline-blockAdd font-size: 0 zum übergeordneten div, dies muss tun. Versuchen Sie auch, vertikal-align: von oben nach rechts div

hinzuzufügen

Anirudh Modi 09.06.2015 18:34

quelle

score 0 · Answer 5

0

%Vor% %Vor%

aslanpayi 09.06.2015 20:01

quelle