5

Olá, tenho um problema que não sei como resolver. Esta é minha situação:

inserir a descrição da imagem aqui

Porém eu quero que fique desta maneira:

inserir a descrição da imagem aqui

E como eu disse, não faço ideia de como resolver.

E esse é meu código:

        <div style=" position: relative; height: 300px; float: left; margin: 15px; display: inline-block" ><img class="img" src="http://img.bomnegocio.com/images/14/1430448213.jpg" style="width: 400px; height: 300px; " />
        </div>

        <div style=" height: 300px; margin: 15px; position: relative; display: block;" >

        <p style="word-wrap: break-word; " >ljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnld
        &nbsp;</p>

        </div>

Obrigado.

4 Respostas 4

5

Enquanto você tratar o texto como uma única sequencia de caracteres, sem espaço. Naturalmente o seu código não particionará o conteúdo e consecutivamente não ira se adequar a base de um width. Imagino que, você não terá uma única palavra gigantesca dessa forma.

Ao invés de tratar como style, apliquei classes. Algumas sinceramente até desnecessárias, há como lapidar um pouco esse código. O valor do body pode ser modificado de acordo com as proporções que for tratar.

CSS

body{
    width:1024px;
}

.areaImagem{
    float:left;
    margin-top:10px;
}

.areaImagem img{
    width:400px;
}

.areaTexto p{
    float:left;
    max-width:500px;
    margin-left:10px;
}

HTML

<div class="areaImagem">
    <img class="img" src="http://img.bomnegocio.com/images/14/1430448213.jpg" />
</div>
    <div class="areaTexto">
 <p>ljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddndljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnldljddnnldlj ddnnld &nbsp;</p>
</div>

JSFiddle

0

Colei o seu HTML no jsfiddle e saiu funcionando como você queria que fosse, mas notei que ele esta complicado um pouco além do que deveria, pode ser mais simples, como isso:

<div>
    <img class="img" src="http://img.bomnegocio.com/images/14/1430448213.jpg" style="width: 400px; height: 300px; margin: 5px; float:left; " />
    <p style="word-wrap: break-word; ">ljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnldljddnnld &nbsp;</p>
</div>

JSFiddle

Ou melhor ainda, elimine os styles inline e use apenas classes, é bem mais fácil de modificar e ajustar depois.

0

Aqui depende muito do efeito que deseja. Se quer o texto a envolver a imagem deve usar o float como nas soluções que já foram apresentadas. Agora de quiser fazer duas colunas, isto é, manter o espaço debaixo da imagem vazio, então poderá fazer assim:

.warper{
width:100%;
}
.warper img{
display: inline-blcok;
width:40%;
margin:2%;
vertical-align:top;
}

.warper p{
display: inline-block;
width: 50%;
margin:2%;
vertical-align:top;
}

<div class='warpper>

   <img src=''>
   <p> Texto </p>

</div>

Note que o valor de width pode ser definido para qualquer valor mas a soma de todos os o width e margin não pode passar do 100%. O width tem que ser mesmo definidos pois por defeito a valor do width da imagem e do p é de 100% o faz o texto ficar debaixo da imagem.

-2

align="Right" na imagem. simples e facil :)

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 .