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
source share
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
source

Source: https://habr.com/ru/post/901856/


All Articles