Div-Container bewegt sich beim Ändern der Größe des Browserfensters

Question

Ausführliche Beschreibung:

Ich habe zwei Container, die beide 50% des maximalen Browserfensters hielten. Sie sind nebeneinander. In diesen Behältern befinden sich zwei weitere Behälter, die wie ein Knopf gestaltet sind.

So: Example

Nun mein Problem ist, wenn ich meinen Browser die Größe von links die divs bewegen sich weg nach rechts, aber ich möchte, dass sie bleiben, wo sie sind.

Hier ist ein Code für Div1 und div2:

<div id='picturediv1' class="image"> 
<div class="ghost"> 
<a id="LK2" target="_blank" href="hehehe">Some link here</a> 
</div> 
</div> 

Hier einige Code für div3 und DIV4:

<div id='picturediv2' class="image2"> 
<div class="ghost2"> 
<a id="LK2" class="TFG2" target="_blank" href="some link here" style="color:black;">Test2</a> 
</div> 
</div> 

Und einige CSS-Code für div 2 und 4 I für div2 Post Nur weil sie beide am identischsten sind.

CSS für div2:

 .ghost 
      { 
       /* position centered */ 
       display:inline-block; 
       position: absolute; 
       margin-top:20%; 
       margin-left:50%; 
       -webkit-transform: translateX(-50%) translateY(-50%); 
       -ms-transform: translateX(-50%) translateY(-50%); 
       transform: translateX(-50%) translateY(-50%); 
       /* text styles */ 
       font-family: Tahoma, Verdana, Segoe, sans-serif; 
       font-size: 13pt; 
       letter-spacing: 0.3em; 
       color:#ffffff; 
       /* modify text */ 
       text-decoration:none; 
       text-transform:uppercase; 
       text-rendering:optimizeLegibility; 
       /* add a border */ 
       border:0.15em solid #fff; 
       padding:0.4em 0.6em; 
       /* animate the change */ 
       -webkit-transition: color 300ms, background 500ms, border-color 700ms; 
       transition: color 300ms, background 500ms, border-color 700ms; 
       text-align: center; 
       -moz-box-sizing: border-box; 
       font-weight: 900; 
       line-height: 60px; 
       text-transform: uppercase; 
       width:50%; 
       text-align:center; 
      } 

fügte ich einige Kommentare zum besseren Verständnis Ich hoffe, ich descriped es gut genug.

Answer 1

Sie können flexbox verwenden, um die gewünschte Ausgabe wie folgt zu erreichen.

Sie können von flex-direction:(row/column) je nach dem machen, wie Sie die Unterelemente wollen wie gezeigt ausrichten auf der div1 und div2 vertikal ausrichten Text Div1 und die Unter div 3.

.flex-container { 
 
    display: flex; 
 
    /*Generates a flexbox layout with default flex direction as row */ 
 
    width: 100%; 
 
    /* Not really required */ 
 
    align-items: center; 
 
    /*Aligns contents vertically */ 
 
    justify-content: center; 
 
    /*Aligns contents horizontally */ 
 
    text-align: center; 
 
    /*Aligns further text in the center */ 
 
} 
 

 
#div1, 
 
#div2 { 
 
    border: 1px solid black; 
 
    flex: 1; 
 
    margin: 0 auto; 
 
    height: 100px; 
 
    display: flex; 
 
    flex-direction:column; 
 
    align-items: center; 
 
    /*Aligns contents vertically */ 
 
    justify-content: center; 
 
    /*Aligns contents horizontally */ 
 
    text-align: center; 
 
    /*Aligns further text in the center */ 
 
} 
 

 
#div3, 
 
#div4 { 
 
    border: 1px solid black; 
 
    margin: 10px auto; 
 
    padding: 20px; 
 
    flex:1; 
 
}

<div class="flex-container"> 
 
    <div id="div1"> 
 
    Div 1 
 
    <div id="div3">Div 3</div> 
 
    </div> 
 
    <div id="div2"> 
 
    Div 2 
 
    <div id="div4">Div 4</div> 
 
    </div> 
 
</div>