Responsive perfect squares inside a fixed positioned div. Part II

问题

I made a question a couple days ago here: Responsive perfect squares inside a fixed positioned div. could anyone help me?.

and I had the perfect solution from web-tiki (ty again) and working fine so far. If interested you can check here: http://asadordearanda.com/movil (web still under construction and just for mobile, you won't see what is about on a pc browser unless you mimize a lot your window).

the fiddle that web-tiki made is http://jsfiddle.net/webtiki/7jJsf/12/.

And now I am starting to change the layout of this web for landscape orientation using

@media all and (orientation:landscape) {}

I need the "perfect squares" to be fixed positioned at the left of the window, perfectly distribute from top to bottom. I have tried to modified the fiddle but I can't seem to make it work. it seemes the dummy div trick is not working on with width insteed of height http://jsfiddle.net/7jJsf/14/.

Could anyone help me and make this work?

as always ty so much in advance and excuse my english. hope the question is clear enough

回答1:

if you want to reverse use the use % vertical padding or margin , CSS cannot. You need , to retrieve height of document and use to set the width of your container, then , it can be used for reference to size your squares .

5 squares : http://jsfiddle.net/7jJsf/30/

basic javascript (to call in onload/onresize function ):

var height = window.innerHeight;
var menu = document.getElementById("container");
menu.style.width=height/6 +"px";

On onload & onresize events :

window.onload= function() {
    squarethem();
}

window.onresize= function() {
    squarethem();
}
function squarethem() {
    var height = window.innerHeight;
    var menu = document.getElementById("container");
    menu.style.width=height/6 +"px";
}
                  }

http://jsfiddle.net/7jJsf/33/

You can overwrites this using mediaquerie for orientation:landscape.

You must then set !important to the width given to container in this orientation in order to overwrite the width applied by Javascript.

http://jsfiddle.net/7jJsf/34/ and here the set of files zipped to test ZIP .

回答2:

I understand what it is you want to do, first I would do something like this:

http://jsfiddle.net/7jJsf/27/

and by looking at your website I see that you are using images in all boxes so what I would do is to set a specific size in the img tag in the css and not worry about the height on the boxes because they will autoscale with the width of the img since it is a square. Hope you understand, if not, I will try again if I get some more code and so on.

//had to post some code to be able to link the jsfiddle... dont care about this line

来源：https://stackoverflow.com/questions/22759034/responsive-perfect-squares-inside-a-fixed-positioned-div-part-ii

标签

html

css

responsive-design