2
respostas

Dúvida sobre o exerício

Pessoal,

Como apresentado abaixo, utilizei a pseudoclasse "nth-of-type", mas as caixas de citação estão indo ambas para a direita, sendo que a ímpar(primeira) deveria ir pra direita e a par (segunda) para a esquerda.

Alguém poderia me ajudar nesta questão?

HTML

 <article>
                <h2>Como trabalho</h2>
                <blockquote class="citacao">
                <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
                <cite> <i>José Souza, FiatSatisfazer</i></cite>
                </blockquote>
                <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>
                <p>Também não trabalho com prazos fechados: qualidade é importante demais para ser sacrificada.</p>
            </article>

CSS

.citacao{
    background-color: #D9E5E3;
    padding: 8**px;
    margin: 1rem 2rem;
    border: .5rem solid #C2CCCA;
    width: 250px;
    box-sizing: border-box;
    border-bottom-color: #333;
    border-right-color: #FFF;
}


.citacao:nth-of-type(odd){
    float: right;
    margin-left: 14px;
}

.citacao:nth-of-type(even){
    float: left;
    margin-right: 14px;
}
2 respostas

Eu copiei e colei seu código aqui, e funcionou perfeitamente, apenas dupliquei o blockquote pois como você passou tem apenas 1.

A única coisa que eu percebi é que no style do .citacao o padding tem dois asteríscos (**), mas acho que só isso não causaria erro no float.

Pode ser que seja o seu navegador, recomendo utilizar o Chrome ou o Firefox, caso não esteja utilizando.

Olá Lucas.

Desculpe pelo equívoco, esqueci de encaminhar a outra parte do HTML. Segue abaixo o correto.

            <article>
                <h2>Como trabalho</h2>
                <blockquote class="citacao">
                <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
                <cite> <i>José Souza, FiatSatisfazer</i></cite>
                </blockquote>
                <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>
                <p>Também não trabalho com prazos fechados: qualidade é importante demais para ser sacrificada.</p>
            </article>

            <article>
                <h2>Experiência</h2>
                <blockquote class="citacao">
                <p>João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes.</p>
                <cite><i>Manoel Santos, Petrobrás</i></cite>
                </blockquote>
                <p>Já desenvolvi projetos para grandes empresas como <a href="www.bmw.com.br">BMW</a>, <a href="www.uol.com.br">UOL</a> e <a href="www.ibm.com.br">IBM</a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>
                <p>Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>
</article>

CSS

.citacao{
    background-color: #D9E5E3;
    padding: 8px;
    margin: 1rem 2rem;
    border: .5rem solid #C2CCCA;
    width: 250px;
    box-sizing: border-box;
    border-bottom-color: #333;
    border-right-color: #FFF;
}


.citacao:nth-of-type(odd){
    float: right;
    margin-left: 14px;
}

.citacao:nth-of-type(even){
    float: left;
    margin-right: 14px;
}