Rubber layout - linear dependence of the horizontal position of the DIV-s
The task: to change the horizontal position of the block elements in a linear fashion when the browser window is resized.
Solution: the term "proportionality" implies a linear dependence of the two parameters. We recall the school course of geometry: a linear relationship is a straight line, its equation is as follows: Y = a X + b . To construct a straight line equation, it is necessary and sufficient to know the coordinates of two points belonging to this straight line. If we take the horizontal position of the block as Y, and X as the window width as X, then the problem is reduced to determining the parameters a and b .
So, suppose that we have two options for the page layout, the first one is 1000 pixels wide, the second is 1600 pixels. On the first layout, a certain blue block is placed at a distance of 100 pixels. from the left edge of the window, and on the second - by 250 pixels. See fig.
It is necessary to build a linear relationship between the position of the DIV and the width of the browser window. Let X1 = 100, X2 = 250 - the provisions of the DIV, and Y1 = 1000, Y2 = 1600 - the width of the window. A little googling and messing up a couple of A4 sheets, remembered the school course and derived a formula for finding the values of a and b :
a = (X2-X1) / (Y2-Y1) = (250-100) / (1600-1000) = 150/600 = 0.25
b = X1-a * Y1 = 100-0.25 * 1000 = -150
Thus, the equation of our private straight has acquired the following form: Y = 0.25 * X-150
How can we use it? Personally, I do this: for an absolutely positioned DIV, I set the left parameter in percent, equal to a * 100, and the margin-left offset, equal to b . That is, in our example, the block style will be:
A working example can be found here: e1.nnov.ru/rezina.html
And you can also download an xls-file that facilitates calculations.
Solution: the term "proportionality" implies a linear dependence of the two parameters. We recall the school course of geometry: a linear relationship is a straight line, its equation is as follows: Y = a X + b . To construct a straight line equation, it is necessary and sufficient to know the coordinates of two points belonging to this straight line. If we take the horizontal position of the block as Y, and X as the window width as X, then the problem is reduced to determining the parameters a and b .
So, suppose that we have two options for the page layout, the first one is 1000 pixels wide, the second is 1600 pixels. On the first layout, a certain blue block is placed at a distance of 100 pixels. from the left edge of the window, and on the second - by 250 pixels. See fig.
It is necessary to build a linear relationship between the position of the DIV and the width of the browser window. Let X1 = 100, X2 = 250 - the provisions of the DIV, and Y1 = 1000, Y2 = 1600 - the width of the window. A little googling and messing up a couple of A4 sheets, remembered the school course and derived a formula for finding the values of a and b :
a = (X2-X1) / (Y2-Y1) = (250-100) / (1600-1000) = 150/600 = 0.25
b = X1-a * Y1 = 100-0.25 * 1000 = -150
Thus, the equation of our private straight has acquired the following form: Y = 0.25 * X-150
How can we use it? Personally, I do this: for an absolutely positioned DIV, I set the left parameter in percent, equal to a * 100, and the margin-left offset, equal to b . That is, in our example, the block style will be:
#mydiv {
width: 100px;
height: 100px;
background: blue;
/* */
position: absolute;
left: 25%; /* a, 100*/
margin-left: -150px; /* , */
top: 30px; /* */
}A working example can be found here: e1.nnov.ru/rezina.html
And you can also download an xls-file that facilitates calculations.
')
Source: https://habr.com/ru/post/28631/
All Articles