Próbuję stworzyć coś takiego:
Jestem pewien, że zaczynam źle, ale nie widzę, jak inaczej, a ponadto nie mogę znaleźć w Internecie niczego, co mogłoby pomóc. Mój kod do tej pory to:
<div class="container">
<div class="one">
one
</div>
<div class="two">
two
</div>
<div class="three">
three
</div>
<div class="four">
four
</div>
<div class="five">
five
</div>
<div class="six">
six
</div>
</div>
I css
.container {
background-color: blue;
display: flex;
}
.one {
height: 400px;
width: 30%;
background-color: red;
}
.two {
height: 250px;
width: 35%;
background-color: white;
}
.three {
height: 400px;
width: 35%;
background-color: lightblue;
}
Problem polega na tym, że nie mogę poprawnie ustawić następnego zestawu div. Jsfiddle
Odpowiedzi:
0 dla odpowiedzi № 1- Rozwiązanie1: Dlaczego nie użyjesz Bootstrap, Dzięki.
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-5">
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
- Rozwiązanie2: Posługiwać się Siatka murarska:
#container {
width: 100%;
max-width: 700px;
margin: 2em auto;
}
.cols {
-moz-column-count:3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-count:3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
}
.box {
margin-bottom: 20px;
}
.box.one {
height: 200px;
background-color: #d77575;
}
.box.two {
height: 300px;
background-color: #dcbc4c;
}
.box.three {
background-color: #a3ca3b;
height: 400px;
}
.box.four {
background-color: #3daee3;
height: 500px;
}
.box.five {
background-color: #bb8ed8;
height: 600px;
}
.box.six {
background-color: #baafb1;
height: 200px;
}
<div id="container" class="cols">
<div class="box one"></div>
<div class="box two"></div>
<div class="box one"></div>
<div class="box three"></div>
<div class="box two"></div>
<div class="box five"></div>
<div class="box one"></div>
<div class="box two"></div>
<div class="box six"></div>
<div class="box three"></div>
<div class="box two"></div>
</div>