2017-02-03 2 views
0

Hallo Ich habe versucht, eine Reihe über einen anderen zu legen Ich machte einen Abschnitt als Wrapper und 2 Figuren mit divs innerhalb des Abschnitts Ich machte es relativ und die Zahlen waren absolut was mich beunruhigt ist, wenn es gesetzt zu absolut wird die Tabellenzeile zu einer Spalte und ich habe keine Ahnung, wie man sie als Zeile behält und einfach die untere Zeile über die oberste setztOrganisieren absolut positionierten Tisch

das ist, was ich habe ich versuchte viele verschiedene nutzlose Tricks und ich gerade stapfte: O

section { 
 
    display: table; 
 
    display: block; 
 
    width: 100%; 
 
    border-spacing: 0.5em; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
figure { 
 
    display: inline-block; 
 
    display: table-row; 
 
    max-width: 25%; 
 
} 
 
div.top { 
 
    text-align: center; 
 
    display: inline-block; 
 
    background-color: grey; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 10px solid rgba(0, 0, 0, 0.1); 
 
} 
 
div.bottom { 
 
    text-align: center; 
 
    display: inline-block; 
 
    background-color: grey; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 10px solid rgba(0, 0, 0, 0.1); 
 
}
 <section style="position: relative;"> 
 
      <figure style="position: absolute;"> 
 
       <div class="top">H</div> 
 
       <div class="top">G</div> 
 
      </figure> 
 
      <figure style="position: absolute;"> 
 
       <div class="bottom">A</div> 
 
       <div class="bottom">B</div> 
 
      </figure> 
 
     </section>

+0

Darf ich fragen, warum Sie Positionen auf diese Weise setzen? Was versuchen Sie zu erreichen, indem Sie sie auf absolut setzen? – Ethilium

+0

jede Website, die ich überquerte über überlappende divs das ganze Gespräch war über die Einstellung eines div als relativ und der andere als absolut einschließlich Z-Index hinzufügen, so dass ich nur gerollt, weil ich coudlnt nichts anderes finden – Decapitar

Antwort

0

Es wird zu einer Spalten, weil es umhüllt. Wenn Sie die absolute Position angeben, ist der "max-width" -Stil relativ zu "section".

Ich weiß nicht, was Sie erreichen möchten, aber schauen Sie hier.

Wenn Figur haben 100% bleibt es horizontal: https://jsfiddle.net/v0zq0en8/

width: 100%; 

Eine andere Lösung hinzufügen "nowrap" ist auf Figur: https://jsfiddle.net/0twvzbaq/

max-width: 25%; 
white-space: nowrap; 
+0

oh ja Entschuldigung, ich habe nicht geschrieben, dass ich wollte ein Raster von 4 divs pro Zeile machen das ist, warum es 25% war – Decapitar

+0

wenn ja dann, warum Breite ist auf Figur, aber nicht auf divs :)? –

+0

oh mein Gott: O ich kann nicht glauben, dass ich so einen dummen Fehler gemacht habe, dank viel ich fühle mich so dumm jetzt haha ​​XD – Decapitar

0

die Positionssätze Beim Entfernen beider Divs richten Sie sich wie erwartet aus. Ist this jsfiddle demo nicht das, wonach Sie suchen?

<section> 
    <figure> 
    <div class="top">H</div> 
    <div class="top">G</div> 
    </figure> 
    <figure> 
    <div class="bottom">A</div> 
    <div class="bottom">B</div> 
    </figure> 
</section> 
Verwandte Themen