1
How can I make the div to adjust and align the top div automatically ? Because this div is inserted dynamically.
I’d like to do that.
Thank you
3 answers
0
Basically it’s simple, use the concept of Even and Odd in the left columns float:left and on the right float:right.
0
Try using measures relative to float: left; to get a sense of the fit, for example.
on a 100% Row there are 6 div s 50%;
they received float: left soon fit but one remained with the right float to adjust the other
follows 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 https://fiddle.jshell.net/pkvvwuo4/1/
but the percentage grids system has many complications, so I recommend studying the css Flexbox
0
You can do it like this, see if it helps. Anything comments that agent adjusts.
<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>
Browser other questions tagged css
You are not signed in. Login or sign up in order to post.
So, but it will have 6 horizontal Ivs, it adapts to the size of its content and when it reaches 6 Ivs, it starts all over again at the bottom line, but only that the Ivs need to fit into the spaces, because at the top line the Ivs have different sizes, as I can do ? Would you have some code for me to study ?
– abduzeedo
try to do in 6 columns would be the simplest I will search the net if I find something put the ex here.
– Jasar Orion