CSS in an HTML page

Asked

Viewed 40 times

0

Print da Página

I have this HTML page, but I don’t know how to do it in my CSS to fit 2 of these Rectangles in a Line

<div id="flex"> <!-- Area Campeoes -->
    <div id="area-principal">
        <div id="area-postagem">
                <!-- Loop --> 
                <div class="caixa-conteudo">
                    <div class="sub-left">
                        <img src="images/aldous.png" width="60">
                    </div>

                    <div>
                        <div id="nome">Aldous</div>
                        <a id="caixa-mini-texto"  href="CarregarChamp?nome=${ champ.nome }">Mostrar</a>
                    </div>
                </div>

                <!-- /Loop -->        
        </div>
    </div>
</div> <!-- /Area Campeoes -->

CSS code

#area-principal {
width: 920px;
padding: 15px;}


#area-postagens {
width: 660px;
float: left;}


.caixa-conteudo {
width: 15%;
background: #fff;
padding: 5px;
margin: 0 auto;
margin-top: 5px;
position: relative;
display: flex;}


.sub-left{
left: 0;}

#nome {
margin-left: 15px;}

#caixa-mini-texto {
margin-top: 13px;
margin-left: 7px;
padding: 5px 9px;
display: block;
background: #f7b600;
color: white;}
html css webdesign

  • Can mount a [mcve] in question?

2 answers

0


Just so I can better understand how to help you. You want to make sure you have two blocks on the side, right? in the case of: Miya | Belmond Know | Alice

Thus?

<html>
  <link href="custom.css" type="text/css" rel="stylesheet" />
  <body>
    <div class="bloco"></div>
    <div class="bloco"></div>

    <script src="teste.js"></script>
  </body>
</html>

.bloco {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-left: 10px;
  display: inline-block;
}

That way, you have 2 blocks on each other. https://prnt.sc/x5nr07

  • That’s right, but I don’t know how to do it

  • I edited my first question to facilitate the visualization of the answer. See if this is what you need.

  • 1

    VLW bro, I managed to fix the code and your code helped, I didn’t know this kind of display

  • Just a hint about your code. Try to arrange it like this: Div of character > character name (><) photo of character > show link. It’s even easier for you to see and edit your code later. If you want, I’ll send you an answer with an example

0

You can also keep it in two columns using column-Count. See if that helps you.

#area-postagem {
  width: 660px;
  column-count: 2;
  padding: 10px;
  float: left;


/*display: block;*/
/*float: left;*/

}

Browser other questions tagged html css webdesign

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