javascript - Equal width and height with a fixed height set -
javascript - Equal width and height with a fixed height set -
i'm creating tiles , fits onto 1 page, each tile has fixed height. in illustration i'm wanting create grid of 3 rows, height of each row 33%, , each square take 33% decide height. say:
height: 33%; width: height;
i've been looking around , i've seen few ways @ doing using width, haven't seen anywhere have fixed height.
any ideas?
update:
http://jsfiddle.net/wl68jwxc/
here fiddle showing current code. so, after help below, create sure these 2 squares on same row...so if alter width of screen, remain squares , on same row regardless of screen size. realise quite different title, logic of question remains same.
you can viewport units.
div { width: 33.33333vh; height: 33.33333vh; float: left; border: 1px solid grey; }
class="snippet-code-css lang-css prettyprint-override">* { box-sizing: border-box; margin: 0; padding: 0; } div { width: 33.33333vh; height: 33.33333vh; float: left; border: 1px solid grey; }
class="snippet-code-html lang-html prettyprint-override"><div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
javascript jquery html css
Comments
Post a Comment