Personalizar Boxes DIV

Detalhes da questão

Endereço do fórum: http://worldofwitchcraft.forumeiros.com
Versão do fórum: ModernBB

Descrição

Olá pessoas


Estou com um sério problema de montagem de boxes dentro de um quadro, no qual quero colocar informações e imagens... Bom,  primeiramente vou mostrar o que estou tentando fazer:
>> Imagem original(base): https://i.imgur.com/YGBbFFJ.png

Este seria o que eu pretendo montar, ignorando as informações em si, meu foco é a organização de cada box e posição das informações... Mas estou bem confuso em como montar ao menos um esqueleto idêntico (apenas bordas(border), tamanhos(width/height) e posição das boxes(position?), poderiam me ajudar a criar este "esqueleto" daquele conjunto de quadros da imagem? Quero fazer muito parecido, mas só queria que me ajudassem a montar o "esqueleto" da imagem. 

O código que estou usando é este:

Código:

<div class="quadro">1
<div class="simbolo">1</div>
<div class="titulo"><h2 class="nome1"><b>Nome do item</b></h2></div>
<div class="level">1</div>
<div class="type">1</div>
<div class="parametros"><h3 class="nome2"><b>Parâmetros</b></h3>
<span class="lock">1</span> Equipando </br>
<span class="durability">2</span> 100 &nbsp;&nbsp;&nbsp; <span class="speed">3</span> 2.2 </div>
<div class="1bonus">1</div>
<div class="2bonus">1</div>
<div class="3bonus">1</div>
<div class="4bonus">1</div>
<div class="crystal">1</div>
<div class="rune">1</div>
</div>
<script/css>
</script>


Cada boxe com um nome de classe para ser personalizada cada uma no meu CSS, então cada vez que eu repetir o código HTML em outros lugares do fórum, iria se repetir a aparência também automaticamente. 

Aí quando eu quiser diferenciar, as informações, eu simplesmente coloco um CSS junto ao código na postagem. Nas classes "lock", "durability" e "speed" são os ícones representados na imagem original, mas deixem os números que coloquei até eu conseguir as imagens (Neste caso não alterem este detalhe), e sobre o quadro que envolta todos os quadros menores, espaçamento interno de 10px, o quadro parâmetros é sem borda. Ok?

Enfim, só queria ajuda pra montar o esqueleto dos quadros da imagem
O resto, é só eu dar aparência ^--^
Aqui uma montagem simples que fiz por cima da imagem original: 
>> Link: https://i.imgur.com/e7oBSr1.png
(No original não aparece um quadro ao lado do nome do item, está em roxo na original, mas se conseguirem colocar o quadrinho ao lado, fico agradecido!)


Aguardo respostas! O/

Olá @ShadouS,
veja se é isto que você quer:

Código:

<style>
  #quadro {
  padding: 1.4em;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
  #quadro > div {
    position: relative;
    display: block;
    background-color: #f0f0f0;
    margin-bottom: .75rem;
    border: 1px solid #e5e5e5;
    border-radius: .25rem;
    width: 30%;
    padding: 1rem;
  }
  #quadro .requi {
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    max-height: 70%;
    max-width: 65%;
  }
  #quadro .bonu, #quadro .enca {
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    max-height: 70%;
  }
 #quadro .para {
    top: 11px;
    right: 35px;
    position: absolute;
  }
  #quadro .para p:first-of-type {
      margin-top: 1.7em;
  }
  #quadro span {
    font-weight: 700;
    position: absolute;
}
  #quadro img {
    max-width: 48px;
    width: 48px;
    height: 48px;
    position: relative;
    margin-top: 1.7em;
}
  #quadro *::-webkit-scrollbar {
    background-color: #f5faff;
  }
  #quadro *::-webkit-scrollbar-thumb {
    background-color: #f8442e;
}
</style>

<div id="quadro">
 <div>
  <div class="requi">
    <span>Requisitos:</span>
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
  </div>
    <div class="bonu">
    <span>Bonûs:</span>
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
  </div>
    <div class="enca">
    <span>Encantamentos:</span>
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
  </div>
  <div class="para">
    <span>Parâmentos:</span>
      <p>1 nenhum</p>
      <p>
        <i>2 100</i>
        <i>3 2.0</i>
      </p>
  </div>
</div>
</div>

Atenciosamente,

Não resultou no que eu queria, além do mais, as div que fez tão sem a borda que eu pedi.
E ficou com os box um embaixo do outro também  


Olhe de novo a minha montagem gráfica, a cor laranja seriam as bordas de cada box:
>> https://i.imgur.com/e7oBSr1.png
(Os textos dentro dos box seriam o nome das classes)

Consegue fazer igual?
E não use imagens, apenas o que mencionei... Bordas, altura, largura e posição.

E ficou com os box um embaixo do outro também

Não é assim que você queria? https://image.ibb.co/bH0yay/image.png

Código:

<style>
  #quadro {
  padding: 1.4em;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
  #quadro > div {
    position: relative;
    display: block;
    background-color: #fafafa;
    margin-bottom: .75rem;
    border: 2px solid orange;
    width: 30%;
    padding: 1rem;
  }
  #quadro .requi {
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    max-height: 70%;
    max-width: 65%;
  }
  #quadro .bonu, #quadro .enca {
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    max-height: 70%;
  }
 #quadro .para {
    top: 11px;
    right: 35px;
    position: absolute;
    border: 1px solid orange;
    width: 30%;
    padding: .25rem;
  }
  #quadro .para p:first-of-type {
      margin-top: 1.7em;
  }
  #quadro span {
    font-weight: 700;
    position: absolute;
}
  #quadro img {
    border: 1px solid orange;
    margin-left: .25rem;
    max-width: 48px;
    width: 48px;
    height: 48px;
    position: relative;
    margin-top: 1.7em;
}
  #quadro *::-webkit-scrollbar {
    background-color: #f5faff;
  }
  #quadro *::-webkit-scrollbar-thumb {
    background-color: #f8442e;
}
</style>
<div id="quadro">
 <div>
  <div class="requi">
    <span>Requisitos:</span>
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
  </div>
    <div class="bonu">
    <span>Bonûs:</span>
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
  </div>
    <div class="enca">
    <span>Encantamentos:</span>
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
    <img src="http://i.imgur.com/QdLwYB0.png" />
  </div>
  <div class="para">
    <span>Parâmentos:</span>
      <p>1 nenhum</p>
      <p>
        <i>2 100</i>
        <i>3 2.0</i>
      </p>
  </div>
</div>
</div>

No meu fórum deve estar bugado, pois não fica como está em sua imagem

Olha: https://i.imgur.com/HhI5lX4.png

Esta com html ativado no fórum :/

Poderia liberar o registo ou passa-me uma conta teste, sem acesso ao painel de controle, via mp?
Para testar?

Claro, irei passar aqui.
Um momento...

Tente somente adicionar isto no seu CSS

Código:

#quadro {
 padding: 1.4em;
 display: flex;
 flex-wrap: wrap;
 box-sizing: border-box;
}
 #quadro > div {
   position: relative;
   display: block;
   background-color: #fafafa;
   margin-bottom: .75rem;
   border: 2px solid orange;
   width: 30%;
   padding: 1rem;
 }
 #quadro .requi {
   overflow-x: auto;
   overflow-y: hidden;
   display: flex;
   -ms-overflow-style: none;
   overflow: -moz-scrollbars-none;
   max-height: 70%;
   max-width: 65%;
 }
 #quadro .bonu, #quadro .enca {
   overflow-x: auto;
   overflow-y: hidden;
   display: flex;
   -ms-overflow-style: none;
   overflow: -moz-scrollbars-none;
   max-height: 70%;
 }
#quadro .para {
   top: 11px;
   right: 35px;
   position: absolute;
   border: 1px solid orange;
   width: 30%;
   padding: .25rem;
 }
 #quadro .para p:first-of-type {
     margin-top: 1.7em;
 }
 #quadro span {
   font-weight: 700;
   position: absolute;
}
 #quadro img {
   border: 1px solid orange;
   margin-left: .25rem;
   max-width: 48px;
   width: 48px;
   height: 48px;
   position: relative;
   margin-top: 1.7em;
}
 #quadro *::-webkit-scrollbar {
   background-color: #f5faff;
 }
 #quadro *::-webkit-scrollbar-thumb {
   background-color: #f8442e;
}


Funcionou! Obrigado !!

Irei personalizar o resto, realmente muito obrigado


Podem fechar o tópico, resouvido
@Fraise

Podem fechar...
@Fraise @Shek @Fou-Lu @Sennior

(Sinto falta do botão Resolvido no fórum  )