Wie man mehrere divs in einem anderen div manuell positioniert

-1

Ich versuche, dieses Layout zu erreichen Die schwarze dünne Linie zeigt die Grenze der äußeren div. Im Inneren gibt es zwei divs (rot und blau). Ich möchte sie mit ein wenig Abstand nebeneinander platzieren. Außerdem sollten der obere/untere Rand des roten Bereichs und der obere/untere Bereich des blauen Bereichs gleich sein. Die linke und rechte sollte auch gleich sein. Dies sollte unabhängig von der Größe des Browsers gleich sein.Wie man mehrere divs in einem anderen div manuell positioniert

Ich habe versucht, mit den Rändern herumspielen, aber ich kann es nicht tun, so dass es genau gleich ist. Hier ist der Link für die volle code meines Versuches.

Hier ist ein Ausschnitt aus meinem Code:

#about { 
    background-color: #D1C9BE; 
    border-style: solid; 
    border-color: black; 
    position: relative; 
} 

#aboutImage { 
    border-style: dotted; 
    border-color: white; 
    background-color: red; 

    height: 150px; 
    width: 150px; 
    margin-top: 200px; 
} 

#aboutInfo { 
    border-style: dotted; 
    border-color: white; 
    background-color: blue; 

    width: 300px; 
    height: 400px; 
    font-size: 35px; 
    text-align: right; 

    margin-left: 20px;

}

Auch ist es eine Möglichkeit, automatisch eine div Größe auf, wie viel Text ist es? Ich habe Lösungen für zwei divs gleicher Größe gesehen, die nebeneinander positioniert sind, aber wie würde ich das mit zwei divs, verschiedenen Größen machen?

Quelle

2017-10-11 dollaza

Sie sollten schauen Sie in [Flexbox] (https://css-tricks.com/snippets/css/a-guide -zu-flexbox /). – tobiv

Verwenden Sie die Flex-Box. Verwechseln Sie nicht die Flex Box und die traditionellen Positionierungsstile. können Sie erreichen, was Sie brauchen, um mit display: flex und justify-content: space-evenly; und align-items: center;

body { 
 
\t margin: 0; 
 
} 
 

 
html, body { 
 
    height:100%; 
 
} 
 

 
/* FULLPAGE */ 
 
.section { 
 
    height: 100vh; 
 
\t display: flex; 
 
    justify-content: space-evenly; 
 
    align-items: center; 
 
} 
 

 
/* ABOUT */ 
 
#about { 
 
\t background-color: #D1C9BE; 
 
} 
 

 
#aboutImage { 
 
\t border-color: white; 
 
\t background-color: red; 
 
\t height: 150px; 
 
\t width: 150px; 
 
} 
 

 
#aboutInfo { 
 
\t border-color: white; 
 
\t background-color: blue; 
 
\t font-size: 35px; 
 
} 
 

 
#aboutInfo p { 
 
\t font-size: 15px; 
 
}

<html> 
 
    <body> 
 
    <section id="about" class="section"> 
 
\t \t \t <!-- Picture --> 
 
\t \t \t <div id="aboutImage"></div> 
 
\t \t \t 
 
\t \t \t <!-- Description --> 
 
\t \t \t <div id = "aboutInfo"> 
 
\t \t \t \t Lorem Ipsum. 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Suspendisse malesuada lacus commodo enim varius, <br> non gravida ipsum faucibus. Vivamus pretium pulvinar <br> elementum. In vehicula ut elit vitae dapibus. Cras ipsum <br> neque, finibus id mattis vehicula, rhoncus in mauris. In <br> hendrerit vitae velit vel consequat. Duis eleifend dui vel <br> tempor maximus. Aliquam rutrum id dolor vel ullamcorper. <br> Nunc cursus sapien a ex porta dictum. 
 
     </p> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t </section> 
 
    
 
    </body> 
 
<html>

Quelle

2017-10-11 22:06:20

Der korrekte Wert für 'justify-content' ist' space-around'. – tobiv

@tobiv nicht wirklich. Space-Around hinterlässt an den Enden einen halbgroßen Raum. Siehe die Spezifikation: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content –

Ich stehe korrigiert, platzgleicher passt in diesem Fall besser, denke ich! – tobiv

Sie können flex verwenden. Für den übergeordneten Container, geben Sie es

.container { 
    display: flex; 
    flex-direction:row; 
    align-items: center; 
}

Quelle

2017-10-11 22:04:29 Nuchimik

Sie flexbox dafür verwenden können. Es hilft Ihnen horizontal (justify-content) und vertikal (align-items) zentrieren Sie Ihre Elemente mit gleichem Raum um sie herum (justify-content: space-evenly). In diesem Fall benötigen Ihre Kindelemente kein zusätzliches Styling.

#about { 
    display: flex; 
    align-items: center; 
    justify-content: space-evenly; 

    padding: 20px; 

    background-color: #D1C9BE; 
    border-style: solid; 
    border-color: black; 
} 

#aboutImage { 
    border-style: dotted; 
    border-color: white; 
    background-color: red; 

    height: 150px; 
    width: 150px; 
} 

#aboutInfo { 
    border-style: dotted; 
    border-color: white; 
    background-color: blue; 

    width: 300px; 
    height: 400px; 
    font-size: 35px; 
    text-align: right; 
}

Was Ihre letzte Frage automatisch Größe divs wieder, das ist eigentlich der Standard, wenn Sie die height Eigenschaft nicht angeben. Das Div ist dann genauso groß wie die Anzahl der Textzeilen (vorausgesetzt, Sie behalten das width-Set bei).

Quelle

2017-10-11 22:06:05 tobiv

Wie man mehrere divs in einem anderen div manuell positioniert

Antwort

Verwandte Themen