Html / css - create a self-expanding dynamic div
I have a sample div structure:
<div id="outer" style="width:600"> <div class="inner"></div> <!--row1--> <div class="inner"></div> <div class="inner"></div><br/> <div class="inner"></div> <!--row2--> <div class="inner"></div> </div> The outer div has a fixed width. Internal divs are generated dynamically, so there may be 1,2,3 in a line, etc.
Is it possible to resize (possibly in transparent css?) The internal divs according to the number in the row? Thus, in the example, the first lines of divs would have a width of 200px and a width in the second row of 300px.
0
1 answer
You can do this with display: table-cell . Browser Support: http://caniuse.com/css-table
See: http://jsfiddle.net/thirtydot/x5ZFg/
HTML: (slightly changed from your question)
<div id="outer"> <div class="innerWrap"> <!--row1--> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="innerWrap"> <!--row2--> <div class="inner"></div> <div class="inner"></div> </div> </div> CSS
#outer { width: 600px } .innerWrap { width: 100%; display: table; table-layout: fixed } .inner { display: table-cell; height: 50px; border: 1px dashed #f0f } +2