1

Suponhamos que tenho um layout contendo 3 divs lado a lado.

A primeira dessas divs possui um tamanho fixo de 100px, a terceira div não pode possuir tamanho fixo pois ela dependerá do texto inserido nela, contudo, ela não poderá quebrar o texto.

Já a segunda div, vai ter que se adaptar ao tamanho das outras divs. Dessa forma, ela será a única que poderá quebrar o texto. Como posso alcançar isso?

A imagem abaixo descreve melhor aquilo que pretendo fazer:

Exemplo das 3 divs

3
  • ja tento usa boostrap ? eu usaria uma table pra fazer essa linha ou um ajax que calcule o tamanho da terceira div e setasse o valor da segunda. mas com uma table seria bem mais simples 10/09/2016 às 16:31
  • c vc quiser posso postar uma resposta utilizando table 10/09/2016 às 16:38
  • Vou pesquisar a respeito... ATT
    – abcd
    10/09/2016 às 16:50

1 Resposta 1

3

Veja se assim resolve seu problema

css

td span{
  font-size:30px;
  background:blue;
  width:auto;
  min-width:1px;
  text-align:right;
  float:right;
  white-space:nowrap;
}
td p{
  background:yellow;
  float:left;
}

html

<div class="col-md-12">
   <table width="100%">
      <tr>
         <td width="100"><img src="imgaqui.jpg"></td>
         <td><p>SEU TXT AKI FORMATADO yg uyg yug uyg ykjg jg fyjkf ygf htj fhg fhg fgh f yjhf </p></td>
         <td width="1%" style="white-space:nowrap;text-align:right"><span>R$ 3,50</span></td>        
      </tr>
      <tr>
         <td width="100"><img src="imgaqui.jpg"></td>
         <td><p>SEU TXT AKI FORMATADO</p></td>
         <td width="1%" style="white-space:nowrap;text-align:right"><span>R$ 153,50</span></td>       
      </tr>
   </table>
</div>

segue o fiddle dele funcionando https://jsfiddle.net/3mLffz19/

2
  • Eu havia feito com .resize() jquery, mas a sua solução é melhor. Gostaria de saber se há algum problema com a semântica em usar table na criação de um layout do tipo?
    – abcd
    10/09/2016 às 17:44
  • cara no meu ver não ha problemas pois ate o boostrap usa table para vários fins. vou dar uma pesquisada para ver se ha outra forma mais eficiente de fazer 10/09/2016 às 23:51

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 .