How can I make the div to fit and align to the top div automatically? Because this div is inserted dynamically.
I would like to do this.
Thank you
Div adjustable with css
1
asked by anonymous 27.08.2016 / 01:21
3 answers
0
You can do this, see if it helps. Anything says agent fits.
<body>
<div id="geral">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
</body>
<style>
body{
border:0;
margin:0;
padding:0;
background:#ffffff;
height:100%;
width:100%;}
#d1{
border:2px solid #ffffff;
background: #c7c7c7;
width:calc(50% - (4px));
height:calc(30% - (4px));
float:left;}
#d2{
border:2px solid #ffffff;
background: #c7c7c7;
width:calc(50% - (4px));
height:calc(40% - (4px));
float:right;
}
#d3{
border:2px solid #ffffff;
background: #c7c7c7;
width:calc(50% - (4px));
height:calc(70% - (4px));
float:left;}
#d4{
border:2px solid #ffffff;
background: #c7c7c7;
width:calc(50% - (4px));
height:calc(60% - (4px));
float:right;}
</style>
27.08.2016 / 04:01
0
Try to use relative measures with float: left; to get a sense of the fit, for example.
In a Row 100% there are 6 divs 50%;
they received float: left soon they fit but one stayed with the float right to fit the others
follow the code
HTML
<div class="row row_container" >
<div class="coluna coluna_1"> </div>
<div class="coluna coluna_2"> </div>
<div class="coluna coluna_3"> </div>
<div class="coluna coluna_4"> </div>
<div class="coluna coluna_5"> </div>
<div class="coluna coluna_6"> </div>
</div>
CSS
/* Adaptação para o responsivo */
.row,
.coluna {
box-sizing: border-box;
}
.row:before,
.row:after {
content: " ";
display: "table";
}
.row:after {
clear: both;
}
.row_container {
float: left;
width: 100%;
border: 1px black solid;
}
.coluna {
border:1px black solid;
float: left;
}
.coluna_1 {
width: 50%;
height: 16vh;
}
.coluna_2 {
width: 50%;
height: 14vh;
}
.coluna_3 {
width: 50%;
height: 11vh;
float: right;
}
.coluna_4 {
width: 50%;
height: 15vh;
}
.coluna_5 {
width: 50%;
height: 13vh;
float: right;
}
.coluna_6 {
width: 50%;
height: 14vh;
}
code link
But the system of grids by percentage has many complications, so I recommend studying the flexbox css
27.08.2016 / 02:37
0
Basically it's simple, use the concept of even and odd in the columns of the left float:left and those of the right float:right .
27.08.2016 / 01:45