Olá, como vai? estou com uma pequena dificuldade em conseguir colocar as imagens uma do lado da outra. ``` .projetos-responsivo{ width: 50%; float:left; } ```<

Imagens não ficaram uma do lado do outro | Bootstrap: criação de uma single-page responsiva

3
respostas

por Paulo Eduardo Ribeiro e Silva

| 76.4k xp | 2 posts

Olá, como vai? estou com uma pequena dificuldade em conseguir colocar as imagens uma do lado da outra.

.projetos-responsivo{
    width: 50%;
    float:left;

}

Usei o seguinte código no css e funcionou, digo, ele diminuiu a imagem e puxou para esquerda, entretanto não foi colocado uma imagem do lado da outra. o que pode ser?

CSS:

    <section class="container">
        <h2 id="nososProjetos">Nossos Projetos</h2>
        <figure class="thumbnail projetos-responsivo">
        <img src="img/projetos/casa-castelo.png" alt="Castelo Img" class="img-responsive">
        <figcaption class="caption">
            <h3>Casa Castelo</h3>
            <p>A casa Castelo é o nosso ultimo lançamento. Feito especialmente para um monge!</p>
        </figcaption>
        </figure>
    </section>
    <section class="container">

    <figure class="thumbnail projetos-responsivo">
        <img src="img/projetos/casa-lago.png" alt="Casa Lago Img" class="img-responsive">
        <figcaption class="caption">
            <h3>Casa Castelo</h3>
            <p>A casa Castelo é o nosso ultimo lançamento. Feito especialmente para um monge!</p>
        </figcaption>
    </figure>
    </section>
    <section class="container">
        <figure class="thumbnail projetos-responsivo">
            <img src="img/projetos/mercado-marapira.png" alt="Mercado Marapira Img" class="img-responsive">
            <figcaption class="caption">
                <h3>Mercado Marapira</h3>
                <p>O mercado Marapira foi projetado nos mínimos detalhes na arquitetura baseada em frutas.</p>
            </figcaption>
        </figure>
    </section>
    <section class="container">

    <figure class="thumbnail projetos-responsivo">
        <img src="img/projetos/palacio-dionisio.png" alt="Palacio Dionisio Img" class="img-responsive">
        <figcaption class="caption">
            <h3>Palacio Dionisio</h3>
            <p>O palácio Dionísio foi eleito pela revista 'Grandes palácios' como o palácio mais lindo do mundo.</p>
        </figcaption>
    </figure>
    </section>

    <section class="container">
        <figure class="thumbnail projetos-responsivo">
            <img src="img/projetos/residencia-ludi.png" alt="Residencia Ludi Img" class="img-responsive">
            <figcaption class="caption">
                <h3>Residencia Ludi</h3>
                <p>A residência Ludi foi projetada para ser a mais bela casa de São Paulo pela revista Housing.</p>
            </figcaption>
        </figure>
    </section>

Desde já agradeço a atenção!

3 respostas

por Ially Fabiane Da Silva

| 337.5k xp | 206 posts

03/03/2022

Olá Paulo, você já tentou usar display: inline-block sem a propriedade float:left?

por Renato Silveira Nunes

| 88.4k xp | 110 posts

Analista programador pleno

07/03/2022

Olá Paulo.

No código você está aplicando o css em cada figure com a class projetos-responsivo. Mas elas estão ainda dentro de section diferentes, por isso não funciona, as sessões estão uma abaixo da outra.

Sugestão:

CSS:

.div-float{
    width: 50%;
    float:left;
}

HTML:

<section class="container">
    <div class='div-float'>
        <h2 id="nososProjetos">Nossos Projetos</h2>
        <figure class="thumbnail projetos-responsivo">
        <img src="img/projetos/casa-castelo.png" alt="Castelo Img" class="img-responsive">
        <figcaption class="caption">
            <h3>Casa Castelo</h3>
            <p>A casa Castelo é o nosso ultimo lançamento. Feito especialmente para um monge!</p>
        </figcaption>
        </figure>
    </div>

    <div class='div-float'>
        <h2 id="nososProjetos">Nossos Projetos</h2>
        <figure class="thumbnail projetos-responsivo">
        <img src="img/projetos/casa-castelo.png" alt="Castelo Img" class="img-responsive">
        <figcaption class="caption">
            <h3>Casa Castelo</h3>
            <p>A casa Castelo é o nosso ultimo lançamento. Feito especialmente para um monge!</p>
        </figcaption>
        </figure>
    </div>

    <div class='div-float'>
        <h2 id="nososProjetos">Nossos Projetos</h2>
        <figure class="thumbnail projetos-responsivo">
        <img src="img/projetos/casa-castelo.png" alt="Castelo Img" class="img-responsive">
        <figcaption class="caption">
            <h3>Casa Castelo</h3>
            <p>A casa Castelo é o nosso ultimo lançamento. Feito especialmente para um monge!</p>
        </figcaption>
        </figure>
    </div>

    ...
</section>

Assim a section.container abrange tudo, mas o float é aplicado para cada div individualmente, onde está a imagem e seu conteúdo.

Abraço.

por Paulo Eduardo Ribeiro e Silva

| 76.4k xp | 2 posts

08/03/2022

Galera, deu certo. Obrigado!