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

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -