Abstand zwischen Divs festlegen

Question

Ich habe zwei Divs wie dieses:

Und hier ist mein CSS:

#left {
  float: left;
  margin-right: 17px;    
}

#right {
  float: right;
}

Ich möchte den Abstand zwischen den Divs auf 40px festlegen. Ich habe versucht, padding, margin und width in meinem CSS hinzuzufügen, aber ich glaube, dass es das padding nicht richtig auf 40px gesetzt hat. Wie mache ich das?

Answer 1

Für Leute, die nach einer Lösung suchen, um den Abstand zwischen N divs festzulegen, hier ist ein weiterer Ansatz unter Verwendung von Pseudo-Selektoren:

div:not(:last-child) {
  margin-right: 40px;
}

Sie können auch Kind-Pseudo-Selektoren kombinieren:

div:not(:first-child):not(:last-child) {
  margin-left: 20px;
  margin-right: 20px;
}

Answer 2

Float them both the same way and add the margin of 40px. If you have 2 elements floating opposite ways you will have much less control and the containing element will determine how far apart they are.

#left{
    float: left;
    margin-right: 40px;
}
#right{
   float: left;
}

Float sie beide in die gleiche Richtung und füge den Abstand von 40px hinzu. Wenn Sie 2 Elemente haben, die in entgegengesetzte Richtungen schweben, haben Sie viel weniger Kontrolle und das enthaltende Element bestimmt, wie weit sie voneinander entfernt sind.

#left{
    float: left;
    margin-right: 40px;
}
#right{
   float: left;
}

Answer 3

Eine weitere Lösung für den Abstand zwischen N Divs kann sein:

div + div {
  margin-left: 40px;
}

Wir nutzen den + CSS-Selektor aus. Es wählt nur die

-Elemente aus, die direkt nach anderen

-Elementen platziert sind.

Beachten Sie: Wir setzen hier margin-left und nicht margin-right.

Answer 4

Sie benötigen einen Abstand zwischen zwei Divs. Der Abstand kann wie folgt erstellt werden:

Abstand (Gutter) = Breite - Abstandsbreite
z.B. Abstand = calc(70% - 2em)

    body{
        font-size: 10px;
    }

    #main div{
        float: left;
        background-color:#ffffff;
        width: calc(50% - 1.5em);
        margin-left: 1.5em;
    }

                Etwas hier     

                    Jemand dort