2

Estou trabalhando em um chat para um site, o chat está Ok, mas como sempre apanho para configurar o CSS.

Quero ajustar a DIV ao tamanho do conteúdo e colocar, só que a DIV ocupa 100% da largura.

.div-chat-i {
color:#000000;
background-color:#C6E2FF;
padding:5px 12px;
border-radius:10px;
border:1px solid #ddd;
width: auto; }  

1 Resposta 1

1

A div é um elemento do tipo bloco, e por default ocupa 100% da largura da tela, ou do elemento do qual estiver dentro.

Veja no exemplo abaixo que eu coloquei ela com 15% da largura do pai, que no caso é o body, que por default tem 100% da largura da tela...

EDIT: No exemplo que fiz, deixe a div, com largura mínima de 15% e máxima de 25%, então se o conteúdo for pequeno ocupa no mínimo 15%, e se form maior que 25% a linha vai quebrar.

OBS: usei position:absolut para posicionar o chat no canto inferior direito

.div-chat-i {
    color:#000000;
    background-color:#C6E2FF;
    padding:5px 12px;
    border-radius:10px;
    border:1px solid #ddd;
    /* estilo de posicionamento e largura*/
    min-width: 15%; 
    max-width: 25%;
    position: absolute;
    bottom: 10px;
    right: 10px;
    left: auto;
}  
<div class="div-chat-i">
    <p>Lorem, ipsum dolor.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam asperiores ratione adipisci dolorem animi ut.</p>
</div>

1
  • 1
    Value Hugo, ajustei tamanhos para não coupar 100%
    – RRV
    Commented 11/05/2018 às 20:08

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 .