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:
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 html css
You are not signed in. Login or sign up in order to post.
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
– Jasar Orion
c you want I can post a reply using table
– Jasar Orion
I’ll look into it... ATT
– abcd