Machen Sie einige bunte Fliesen auf klicken öffnet ein div

Question

Ich möchte einige bunte Fliesen machen, die beim Klicken öffnen ein Modal mit einigen mehr Fliesen. Diese Kacheln sollten das Modal aktualisieren und weitere Kacheln anzeigen.

Ich möchte einen Ordner wie etwas machen, in dem es mehr Ordner und einige weitere Ordner gibt.

Sag mir einfach, wie man es für eine Ebene tief macht, und ich werde mich ausruhen.

Denn jetzt alles, was ich getan hatte, ist dies:

html, body, .container 
 
{ 
 
height: 100%; 
 
min-height: 100%; 
 
} 
 

 
.first { 
 
float: left; 
 
width: 20%; 
 
height: 30%; 
 
background-color: red; 
 
} 
 

 
.second{ 
 
float: left; 
 
width: 20%; 
 
height: 70%; 
 
background-color: green; 
 
} 
 

 

 
.third{ 
 
float: right; 
 
width: 80%; 
 
height: 80%; 
 
background-color: blue; 
 
} 
 

 
.fourth { 
 
float: right; 
 
width: 40%; 
 
height: 20%; 
 
background-color: #DDDDDD; 
 
} 
 

 
.last{ 
 
float: right; 
 
width: 40%; 
 
height: 20%; 
 
background-color: yellow; 
 
}

<div class="container"> 
 
<div class="first">first</div><div class="third">third</div> 
 
<div class="second">second</div><div class="fourth">fourth</div> 
 
<div class="last">last</div> 
 
</div>

Answer 1

Wahrscheinlich am besten etwas wie Bootstrap zu verwenden (die auch jQuery erfordern wird):

https://jsfiddle.net/ryanpcmcquen/jpe70pLy/

html, 
 
body, 
 
.container { 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
.first { 
 
    float: left; 
 
    width: 20%; 
 
    height: 30%; 
 
    background-color: red; 
 
} 
 

 
.second { 
 
    float: left; 
 
    width: 20%; 
 
    height: 70%; 
 
    background-color: green; 
 
} 
 

 
.third { 
 
    float: right; 
 
    width: 80%; 
 
    height: 80%; 
 
    background-color: blue; 
 
} 
 

 
.fourth { 
 
    float: right; 
 
    width: 40%; 
 
    height: 20%; 
 
    background-color: #DDDDDD; 
 
} 
 

 
.last { 
 
    float: right; 
 
    width: 40%; 
 
    height: 20%; 
 
    background-color: yellow; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="first" data-toggle="modal" data-target="#myModal"> 
 
    first 
 
    </div> 
 
    <div class="third">third</div> 
 
    <div class="second">second</div> 
 
    <div class="fourth">fourth</div> 
 
    <div class="last">last</div> 
 
</div> 
 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     Put a bunch of tiles here. 
 
    </div> 
 
    </div> 
 
</div>

Das wird mit dem JavaScript für Sie umgehen und dann können Sie einfach einige saubere modale Markup schreiben. Weitere Informationen finden Sie hier, wie Bootstrap modals zu verwenden:

https://getbootstrap.com/javascript/#live-demo