separate Divs HTML

Asked

Viewed 3,685 times

0

Hello!
Using the bootstrap, can you tell how I can align the Divs ? (col-Md-6) ?

but in the first half, I need to divide the grid in two .

<div class="col-md-6">
    <div class="row">
        <div id="dados-devedor">
        
        </div>
        <div id="dados-contrato">
        </div>
    </div>
</div>
<div class="col-md-6">
     <div class="row">
        <div id="eventos">
       
        </div>
    </div>
</div>

inserir a descrição da imagem aqui

html css

1 answer

1


A detail, col- should always be son of row!

<!--//CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>
.shc {
    /*remove a margem das colunas e row*/
    margin: 0;
    padding: 0;
}

/*fixa altura dos elementos que dividem o espaço*/
#dados-devedor, #dados-contrato {
    height: 250px;
}

#dados-devedor {
    background-color: #f00;
}
#dados-contrato {
    background-color: #00f;
}
#eventos {
    background-color: #0f0;
    height: 500px; /*fixa altura do elemento que fica direita*/
}
</style>

<div class="row shc">

    <div class="col-md-6 shc">
        <div id="dados-devedor">
        devedor
        </div>
        <div id="dados-contrato">
        contrato
        </div>
    </div>

    <div class="col-md-6 shc">
        <div id="eventos">
        Eventos
        </div>
    </div>

</div>

Flex with CSS

Of course using the way I showed it leaves the fixed size, if you want to use dynamic sizes that accompany you can use flex, see an example very similar to what you want:

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.