Develop layout with 3 columns

Asked

Viewed 214 times

1

Suppose I have one layout containing 3 divs side by side.

The first of these divs has a fixed size of 100px, the third div cannot have a fixed size as it will depend on the text inserted in it, however, it cannot break the text.

Already the second div, will have to adapt to the size of other divs. This way, it will be the only one that can break the text. How can I achieve this?

The image below describes better what I intend to do:

Exemplo das 3 divs

  • already use boostrap ? I would use a table to make this line or an ajax that calculates the size of the third div and sets the value of the second. but with a table it would be much simpler

  • c you want I can post a reply using table

  • I’ll look into it... ATT

1 answer

3


See if this solves your problem

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>

keeps his fiddle running https://jsfiddle.net/3mLffz19/

  • I had done with . resize() jquery, but your solution is better. I wonder if there is a problem with semantics in using table in creating a layout of the type?

  • Guy in my view there is no problem because even boostrap uses table for various purposes. I’ll do a little research to see if there’s another, more efficient way to do it

Browser other questions tagged

You are not signed in. Login or sign up in order to post.