0

Print da Página

Eu tenho essa página HTML, mas não sei como fazer no meu CSS para conseguir caber 2 desses Retângulos em uma Linha

<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 -->

Código do CSS

#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;}
1

2 Respostas 2

0

Só pra mim entender melhor como tentar te ajudar. Tu queres fazer com que tu tenha 2 blocos de lado, certo? No caso: Miya | Belmond Saber | Alice

Dessa forma?

<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;
}

Dessa forma, tens 2 blocos um do lado do outro. https://prnt.sc/x5nr07

4
  • Isso mesmo, mas não sei como fazer
    – Gabriwl
    Commented 18/01/2021 às 20:53
  • Editei minha primeira pergunta pra facilitar a visualização da resposta. Vê se é isso que tu precisa.
    – Tiu Hiikou
    Commented 18/01/2021 às 21:06
  • 1
    Vlw mano, consegui arrumar o código e o seu código ajudou, não sabia desse tipo de display
    – Gabriwl
    Commented 18/01/2021 às 21:13
  • Só uma dica a respeito do teu código. Tenta organizar ele da seguinte forma: Div do personagem > nome do personagem (><) foto dele > link de mostrar. Fica inclusive mais fácil de tu conseguir visualizar e editar teu código depois. Se quiser, eu mando uma resposta com um exemplo
    – Tiu Hiikou
    Commented 18/01/2021 às 21:15
0

Tu consegue também manter em duas colunas usando o column-count. Ver se isso te ajuda.

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


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

}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .