javascript - Layout divs in rows then columns -


i have container div , 3 div inside following.

<div>     <div>1</div>     <div>2</div>     <div>3</div> </div>

i don't know content of each div inside, have variable height , width.

height of container decided tallest div inside.

i want show these div such way fill height first (left right) , move next column below.

+------------------+ |+-------++-------+| ||       ||       || ||       ||       || |+-------+|       || |+-------+|       || ||       ||       || ||       ||       || |+-------+|       || |         +-------+| +------------------+

obviously if these divs big , can't fit in 1 column, layout 3 columns below

+---------------------------+ |+-------++-------++-------+| ||       ||       ||       || ||       ||       ||       || ||       ||       ||       || ||       ||       ||       || ||       |+-------+|       || ||       |         |       || |+-------+         |       || |                  +-------+| +---------------------------+

question: possible preferably using css , how?

edit:

  • there few things need clarify
  • the container can have 2 or 3 columns @ (never 1 column , never more 3).
  • width of container not fixed of internal div same.
  • height of container decided tallest internal div. example if tallest div 300px height of container 300px.
  • the other 2 shorter div should decide if can fit in 1 column or should show in 2 separate columns. based on example (previous item).
  • the other 2 smallest div should decide in 1 column or 2 columns.
  • none of internal div should wrapped.

example: div heights: 1st 300px, 2nd 100px, 3rd 150px
result: 2 column layout (2nd , 3rd in same column).

example: div heights: 1st 100px, 2nd 300px, 3rd 150px
result: 3 column layout.

example: div heights: 1st 100px, 2nd 200px, 3rd 300px
result: 2 column layout (1st , 2nd in same column).

example: div heights: 1st 100px, 2nd 210px, 3rd 300px
result: 3 column layout.

an css only solution columns use column-count , max-height on container (the wrapping div).

it kinda want, @ least extend. might break divs @ column breaks. think, better of in javascript.

update:

after additional conditions, add answer, concerning css-only approach: column-break-inside:avoid. still ain't perfect - bit closer want. you have assign width columns, divs can set width:100%, number of columns automatic, alright, not sure if can dynamicaly adjust container's width number of columns.

another note: avoid splitting divs in firefox, need use display:inline-block; in addition.

so, here can see how performs examples: demo

at least play , maybe use time ;-)


Comments

Post a Comment

Popular posts from this blog

Change php variable from jquery value using ajax (same page) -

what i'm trying this: i've php global variable $currentid , simple jquery script check if there "id" (page) in hash of url , if yes wanted give value $currentid . i've been reading lot , notice shall use ajax i'm not managing it. my code is: <script type="text/javascript"> $(document).ready(function(){ if (parent.location.hash != '' ) { var thecurrentid = parent.location.hash.split('#')[1]; $.ajax({ url: 'my.php', //current page type: 'post', data: {theid: thecurrentid }, datatype: 'json', success: function () { } }); } // code here }); </script> could me please? thank in advance. php server side language, meaning once has sent data browser, php variables , data cannot changed... however, using ajax, can send request php page , change data in dom based on result. consider th...
Read more

Pull out data related to my apps from Android Play Store and iOS App Store -

i want pull out data related apps (ratings, reviews, etc) google play store , apple app store ? how can accomplish ? i have found open source apis google mentioned not reliable. also there paid apis (e.g. appfigures) available. has idea how able pull data these play stores ?? i looking direction on how can accomplish this. can suggest ? we (appfigures) have been working on developing infrastructure give ability reviews , bunch of other data points major app stores several years :] we make available via our api though may want check out.
Read more

How can I fetch data from a web server in an android application? -

i want retrieve data web server in android application, , don't know begin. should use web services? i recommend these tutorials: connect android php , mysql , json in android , php , mysqli i used these tutorials , managed trying working without difficulty. between them describe each step in how attempting @ each stage, android application, database , web server side , has information included can process , use received information the thing add connect android php , mysql tutorial makes use of mysql_ in php deprecated. better use mysqli why included third link. the basic outline of want this: 1) in android app make request server php script using class this: import java.io.bufferedreader; import java.io.ioexception; import java.io.inputstream; import java.io.inputstreamreader; import java.io.unsupportedencodingexception; import java.util.list; import org.apache.http.httpentity; import org.apache.http.httpresponse; import org.apache.http.namevaluepair...
Read more