javascript - Want to arrange css divs in a proper way -
Please, answer / help me.
I have three div with CSS and it is dynamically generated.
And I call them
wincontainer ,
smalldiv and
largediv .
wincontainer is a container
smalldiv and
largediv as we can see in the image.
Div s properties
As we can see, we have 2 largediv s and 4 smalldiv s which are dynamically ready yet < / P>
Question: I want to arrange a small div in a proper way. Picture like this picture.1). But they are coming in the form of figs (2)
As I said I can not make sub wrappers because they generate dynamic and very important serial intelligent ... if I make subwrapper then according to this serial
Note: I do not have another specific div to include smalldiv or largediv to isolate it Because that small and big div is in accordance with a serial so we have a special Can not put into containers and they are dynamic.
In JSFIDDLE - & gt; It will work fine when you remove the upper most ultraviolet, but when you add a small ball to the top, it becomes crazy. I want to fix it and make it properly in the unlimited space.
A div will either be largediv or small, each can have a variable number and can appear in any order. All are largely contained in small and small Wintakner. Additional markup is not allowed
Here is an option for which Javascript is required:
$ (document) .ready (function () {var containertop = $ ('container') [0] .offetop, lpos = containerTop, rpos = containerTop; $ ('. Container & Gt; div '). Each (function) ($ L.hasClass (' big ')) {if (lpos & lt; el.offsetTop) {$ el.css (' margin-top ', (lpos - el.offsetTop ) + "Px")}} lpos + = $ el.height ();} and if ($ el HasClass ('small')) {if (rpos & lt; el.offsetTop) {$ El.css ('margin-top', (rpos-el.offsetTop) + "px")}}} rpos + = $ el Height ();}}};}); .container {}. Container & gt; Div {Width: 50%; Box-Size: Boundary Box; Status: Relative; }. Container. Large {height: 400px; Display: inline-block; Swim left; Clear: left; Status: Relative; }. Container .small {height: 150px; Display: inline-block; float right; Clear: OK, Position: Relative; } .red {background-color: red} .blue {background-color: blue} .green {background color: green}. Yellow {background-color: yellow} Upper {background color: purple} Orange {background-Color: orange} & lt; Script src = "https://ajax.googleapis.com/ ajax / libs / jQuery / 2.1.1 / jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Div class = 'container' & gt; & Lt; Div squared = 'big red' & gt; & Lt; / Div & gt; & Lt; Div class = 'small blue' & gt; & Lt; / Div & gt; & Lt; Div class = 'small green' & gt; & Lt; / Div & gt; & Lt; Div square = 'big yellow' & gt; & Lt; / Div & gt; & Lt; Div squares = 'small purple' & gt; & Lt; / Div & gt; & Lt; Div class = 'small orange' & gt; & Lt; / Div & gt; & Lt; / Div & gt; Note: I think it would be better to use a div for your "wincontainer" from an order list.
Comments
Post a Comment