css - Dynamic width with multiple elements -
css - Dynamic width with multiple elements -
i'm trying find pure css way have 1 or more elements inline , have them adjust width fill container e.g.
1 element
[------]
2 elements
[---***]
3 elements
[--**..]
is achievable through pure css?
use display: table on parent, , display: table-cell on children. can add together many inner div's wish. this:
html
<div class="container"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> </div>
css:
.container { display: table; width: 500px; height: 300px; outline: 1px solid red; } .inner { display: table-cell; outline: 1px solid blue; }
here's fiddle: http://jsfiddle.net/w8p2nj9z/
css width elements
Comments
Post a Comment