javascript - How do I make floated elements resize correctly -
i have been trying figure out while , try fails produce result after.
so setup follows
html
<div class="container"> <div class="icon-holder"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/> </div> <div class="icon-holder"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/> </div> <div class="icon-holder"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/> </div> <div class="icon-holder"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/> </div> <div class="icon-holder"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/> </div> </div>
css
.icon-holder { float:left; height:100%; width:auto; } .container { height:100px; } .icon { height:auto; width: auto; max-height: 100%; display:block; } .container-before { height:100px; } .container-after { height:20px; }
now problem lies in if use javascript resize container need images resize , have no spacing in between. need css solution works, know can hack js thats not trying accomplish.
i have example running @ http://jsfiddle.net/twmxh/3/ of whole issue expected output.
update
just bit more implementation. container
div toolbar resize handle. container element can apply new height on.
can this
$("#resize").click(function() { $('.container').height("20px"); $('.container .icon').width("20px"); });
Comments
Post a Comment