Ausrichten von zwei Divs nebeneinander in einem Div horizontal

Ich habe ein Problem im Moment. Die rosa Box unten ist in einem Abschnitt. Derzeit ist es: Ausrichten von zwei Divs nebeneinander in einem Div horizontal

section { 
    height: 341px; 
    background: purple; 
    border-radius: 5px; 
    margin: 0 1.5% 24px 1.5%; 
    text-align: center; 
    clear: both; } 

.vid { 
    border-radius: 5px; 
    margin: 0 1.5% 24px 1.5%; 
    text-align: center; 
    background: pink; 
    height:300px; 
    width:656px; }

ZUM ANTRAG AUF HTML:

<section> 
     Section 
     <div class="vid"> 
     <div class="image1"> 
</section>

Jedes Mal, wenn ich versuchen, ein anderes Bild daneben einer anderen Breite hinzuzufügen, erscheint nichts wirklich. Versuchen Sie es so zu machen, dass es den gleichen Abstand wie die linke Seite hat (also die Lücke zwischen der lila linken Seite und der pinkfarbenen Anfangsseite).

Irgendwelche Tipps? Die neue Klasse wird image1 genannt.

Quelle

2016-03-20 Anonymous

auch Ihre HTML-Code sorgen. –

Wenn Sie zwei Divs horizontal nebeneinander ausrichten, müssen Sie beiden Divs Breite hinzufügen und display: inline-block; hinzufügen. Hier

ein Beispiel:

section { 
 
    height: 341px; 
 
    background: purple; 
 
    border-radius: 5px; 
 
    margin: 0 1.5% 24px 1.5%; 
 
    text-align: center; 
 
    clear: both; 
 
} 
 

 
.vid { 
 
    border-radius: 5px; 
 
    margin: 0 1.5% 24px 1.5%; 
 
    text-align: center; 
 
    background: pink; 
 
    height: 300px; 
 
    width: 300px; 
 
    display: inline-block; 
 
} 
 
.image1{ 
 
    width: 300px; 
 
    height: 300px; 
 
    background: pink; 
 
    display: inline-block; 
 
}

<section> 
 
    <div class="vid"> 
 
    Div 1 
 
    </div> 
 
    <div class="image1"> 
 
    Div 2 
 
    </div> 
 
</section>

Quelle

2016-03-20 08:58:20

Vielen Dank! –

Hat einen kleinen Test unten und es sollte funktionieren. Im Moment sind die Boxen in der Sektion zentriert (wie in Ihrem Code, aber nicht in Ihrem Bild). Wenn Sie nach links ausrichten möchten, ändern Sie den Text nach links.

section { 
 
    background: purple; 
 
    border-radius: 5px; 
 
    margin: 0 1.5% 24px 1.5%; 
 
    text-align: center; 
 
    clear: both; 
 
} 
 

 
.vid { 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    margin: 24px 1.5% 24px 1.5%; 
 
    text-align: center; 
 
    background: pink; 
 
    height:300px; 
 
} 
 

 
#image0{ 
 
    width:256px; 
 
} 
 
#image1{ 
 
    width:256px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <section> 
 
    <div id="image0" class="vid"></div> 
 
    <div id="image1" class="vid"></div> 
 
    </section> 
 
</head> 
 
<body> 
 

 
</body> 
 
</html>

Quelle

2016-03-20 09:08:12

Ich habe die Methode der anderen Personen benutzt und es hat funktioniert. Vielen Dank für die Unterstützung als auch! –

Ihre HTML-Markup würde, um sehr nützlich sein, Ihr Problem gründlich zu verstehen. Wenn ich Sie jedoch richtig verstehe, möchten Sie, dass das Bild in der gleichen Zeile wie das Element .vid positioniert wird.

In diesem Fall ist das Problem, dass Sie display: inline-block propety zu Ihrem .vid Element hinzufügen müssen. Es erlaubt einem Element, Breite und Höhe zu haben, aber in jeder anderen Hinsicht behandelt es wie ein Inline-Objekt (wie zum Beispiel span).

Darüber hinaus scheint es, dass Sie möglicherweise overflow: hidden Eigenschaft auf dem section Element oder einem seiner Eltern angegeben haben, weil andernfalls Ihr Bild unterhalb des Abschnitts angezeigt werden sollte.

basicaly Ihre css etwas wie das gehen könnte:

section { 
    height: 341px; 
    background: purple; 
    border-radius: 5px; 
    margin: 0 1.5% 24px 1.5%; 
    text-align: center; 
    clear: both; } 

.vid { 
    display: inline-block; 
    border-radius: 5px; 
    margin: 0 1.5% 24px 1.5%; 
    text-align: center; 
    background: pink; 
    height:300px; 
    width:656px;}

Sie können versuchen, es dieses auf pen

Quelle

2016-03-20 09:19:58 sztal

Ausrichten von zwei Divs nebeneinander in einem Div horizontal

Antwort

Verwandte Themen