0

Quero alinhar uma div para a direita, mas que fique com as margens como foram impostas, só que ele as ignora e fica fora da div box. Acho que com essa foto vai dar pra ver melhor

inserir a descrição da imagem aqui

.answer {margin: 20px !important; float: right;}

Vi que estavam faltando muitos códigos para auxiliarem vocês:

O CSS da div "box":

.post{background: #fff; border: 1px solid #f0f0f0; padding: 10px; margin: auto auto 30px auto; width: 500px;}

O CSS desse "perguntas e respostas":

.ask{margin: 0; padding: 0;}
.question{margin: 10px; position: relative; top: -10px;}
.asking{color: #012551; font-weight: bold; text-transform: lowercase;}
.answer {margin: 20px !important; float: right;}
.asking-avatar{border-radius: 100%; margin-left: 10px;}
.answer-avatar{border-radius: 100%; float: right;}

O HTML do "perguntas e respostas"

{block:Answer}
    <div class="ask">
        <img src="{AskerPortraitURL-30}" class="asking-avatar"/>
        <span class="question"><span class="asking">{Asker}</span>: {Question}</span>
        <div class="answer">
            <img src="{PortraitURL-30}" class="answer-avatar"/>
            {Answer}
        </div>
     </div>
{/block:Answer}
1
  • 2
    Como a pergunta não tem um código para ver o contexto, a única coisa que posso dizer é: evite usar float. Existem outras maneiras de alinhar um elemento, mas sem o código HTML e CSS não dá pra afirmar ao certo que deve ser feito.
    – Sam
    Commented 17/11/2018 às 18:30

1 Resposta 1

1

O float faz com que o elemento pai não adapte a altura ao conteudo, para resolver isto é necessário usar clear: both com um elemento no final ou com um pseudo-elemento, um exemplo:

.content {
   border: 1px solid #ccc;
}

.c-l, .c-r {
   border-bottom: 1px solid #ccc;
}

.c-r:last-child {
   border: none;
}

.content img {
    background: #fcfcfc;
    border-radius: 50%;
}

.c-l img {
   margin: 20px;
   float: left;
}
.c-r img {
   margin: 20px;
   float: right;
}

.c-l:after, .c-r:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
<div class="content">
    <div class="c-l">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
    </div>
    
    <div class="c-r">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
    </div>
    <div class="c-l">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
    </div>
    
    <div class="c-r">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
    </div>
    <div class="c-l">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
    </div>
    
    <div class="c-r">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
    </div>
</div>

no caso acima usei pseudo elemento :after, que ajuda a escrever menos HTML, se souber usar "estrategicamente", mas poderia usar um div também, exemplo:

.content {
   border: 1px solid #ccc;
}

.c-l, .c-r {
   border-bottom: 1px solid #ccc;
}

.c-r:last-child {
   border: none;
}

.content img {
    background: #fcfcfc;
    border-radius: 50%;
}

.c-l img {
   margin: 20px;
   float: left;
}
.c-r img {
   margin: 20px;
   float: right;
}

div.clear {
    clear: both;
}
<div class="content">
    <div class="c-l">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
        <div class="clear"></div>
    </div>
    
    <div class="c-r">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
        <div class="clear"></div>
    </div>
    <div class="c-l">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
        <div class="clear"></div>
    </div>
    
    <div class="c-r">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
        <div class="clear"></div>
    </div>
    <div class="c-l">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
        <div class="clear"></div>
    </div>
    
    <div class="c-r">
        <img src="https://www.gravatar.com/avatar/4c937661dc06b46b541d3e6ccdc19687?s=48&d=identicon&r=PG" class="answer">
        <div class="clear"></div>
    </div>
</div>

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 .