2

tenho um widget que vou inserir alguamas imagens,e dentro desse widget tenho uma div e outra div detro dela onde serão inseridas as imagens, e mais duas divs onde ficaram um titulo e uma imformação abaixo desse titulo.O problema é que as images estão ficando com uma margem grande no topo, como posso consertar isso? ou podem me dar alguma outra forma de fazer essa implementação?

códigos abaixo:

.noticiaarea2 {
    width: 310px;
    height: 420px;
    float: right;
}

.clear {
    clear: both;
}

.noticia_item {
    text-align: left;
    height: 88px;
}

.noticia_img {
    width: 80px;
    height: 80px;
    border: 1px solid #ccc;
    padding: 3px;
    float: left;
}

.noticia_titulo {
    float: left;
    margin-left: 6px;
    font-size: 16px;
    width: 216px;
}

.noticia_info {
    float: left;
    margin-left: 6px;
    color: #999;
    width: 216px;
}
        <div class="widget">
            <div class="widget_titulo">NOTÍCIAS</div>
            <div class="widget_conteudo">
                <div class="noticiaarea1">
                </div>
                <div class="noticiaarea2">
                    <div class="noticia_item"></div>
                    <div class="noticia_img">
                        <img src="" border="0" width="80" height="80">
                    </div>
                    <div class="noticia_titulo">Algum titulo qualquer</div>
                    <div class="noticia_info">500 comentários</div>
                    <div class="noticia_item"></div>
                    <div class="noticia_img">
                        <img src="" border="0" width="80" height="80">
                    </div>
                    <div class="noticia_titulo">Algum titulo qualquer</div>
                    <div class="noticia_info">500 comentários</div>
                    <div class="noticia_item"></div>
                    <div class="noticia_img">
                        <img src="" border="0" width="80" height="80">
                    </div>
                    <div class="noticia_titulo">Algum titulo qualquer</div>
                    <div class="noticia_info">500 comentários</div>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>

1
  • Difícil entender viu. Tem como fazer um print ai e colar na sua pergunta?
    – viana
    Commented 14/05/2018 às 20:15

1 Resposta 1

0

Jovem o seu problema é com a estrutura do seu HTML, as imagens e as infos devem estar dentro da <div class="noticia_item"> porém vc fechou ela antes de colocar os elementos dentro.

Para entender melhor veja o exemplo abaixo. Não mexi em nada de CSS só fechei a tag da div <div class="noticia_item"> no lugar certo. Deixei o comentário no código <!-- abre aqui -->

.noticiaarea2 {
    width: 310px;
    height: 420px;
    float: right;
}

.clear {
    clear: both;
}

.noticia_item {
    text-align: left;
    height: 88px;
}

.noticia_img {
    width: 80px;
    height: 80px;
    border: 1px solid #ccc;
    padding: 3px;
    float: left;
}

.noticia_titulo {
    float: left;
    margin-left: 6px;
    font-size: 16px;
    width: 216px;
}

.noticia_info {
    float: left;
    margin-left: 6px;
    color: #999;
    width: 216px;
}
<div class="widget">
    <div class="widget_titulo">NOTÍCIAS</div>
    <div class="widget_conteudo">
        <div class="noticiaarea1">
        </div>
        <div class="noticiaarea2">
            <!-- abre aqui -->
            <div class="noticia_item"> 
                <div class="noticia_img">
                    <img src="http://placecage.com/80/80" border="0" width="80" height="80">
                </div>
                <div class="noticia_titulo">Algum titulo qualquer</div>
                <div class="noticia_info">500 comentários</div>
            </div>
            <!-- fecha aqui -->
            <div class="noticia_item">
                <div class="noticia_img">
                    <img src="http://placecage.com/80/80" border="0" width="80" height="80">
                </div>
                <div class="noticia_titulo">Algum titulo qualquer</div>
                <div class="noticia_info">500 comentários</div>
            </div>
            <div class="noticia_item">
                <div class="noticia_img">
                    <img src="http://placecage.com/80/80" border="0" width="80" height="80">
                </div>
                <div class="noticia_titulo">Algum titulo qualquer</div>
                <div class="noticia_info">500 comentários</div>
            </div>
            
        </div>
        <div style="clear: both;"></div>
    </div>
</div>

Você deve fazer log-in para responder a esta pergunta.