How do I add article block to my Section tag?

Asked

Viewed 44 times

0

I’m having trouble adding a Section tag where there are 3 squares next to each other.

section#blocos{
    display: block;
    text-align: center;
}

section#blocos .blocos-coloridos{
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 1% 0;
    padding: 2% 2%;
}
<section id="blocos">
    <div class="bloco-coloridos">
        <h3>Vermelho</h3>
        <h4>Azul</h4>
        <h5>Verde</h5>
    </div>
</section>

html5 css3

  • Welcome to the sopt. It would be interesting to add a [mcve] in the question, and also the image directly here, so it is easier to help you and the question is independent of links. :)

  • I’ll program and send

  • can help me?

  • @Borgesco I made an answer based on what I understood in the question, see if this solution, help you?

1 answer

0

Just give a float: right; in the internal elements of div #bloco-coloridos, still added a width: 33.33% that divides exactly the same space into three parts! 

.bloco-coloridos > div{
  width: 33.33%;
  float: right;
}

#vermelho {
  background-color: red;
}

#azul {
  background-color: blue;
}

#verde {
  background-color: green;
}
<section id="blocos">
  <div class="bloco-coloridos">
    <div id="vermelho">Vermelho</div>
    <div id="azul">Azul</div>
    <div id="verde">Verde</div>
  </div>
</section>

Browser other questions tagged html5 css3

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