84447

CSS column count causing items to split columns

Question:

Trying to not use a jQuery script for a masonry effect so looking to CSS for alternatives.

I am trying to use column count, which appears to be working but not as expected.

So the columns are there, but sometimes the items in the container are being split across more than one as you should be able to see in this example:

<a href="http://jsfiddle.net/DTcHh/3858/" rel="nofollow">http://jsfiddle.net/DTcHh/3858/</a>

<pre class="lang-css prettyprint-override">#builds { width: 100%; } .cols { -moz-column-count:4; -moz-column-gap: 3%; -moz-column-width: 25%; -webkit-column-count:4; -webkit-column-gap: 3%; -webkit-column-width: 25%; column-count: 4; column-gap: 3%; column-width: 25%; } .item { height: auto; width: 100%; }

I am using pagination for the items from a database, and sometimes everything works fine but others it doesn't.

Any logic as to why / what im doing wrong?

Answer1:

I think <a href="http://www.w3.org/TR/css3-multicol/#break-inside" rel="nofollow">this</a> is that you need

.items { -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; }

Recommend

  • How to make this layout in CSS?
  • jQuery/css: Fluid responsive isotope grid with square divs
  • Which parts of react-virtualized package I need?
  • layout / masonry - delayed layout adjustment - one click behind
  • Python: Split a String Field into 3 Separate Fields using Lambda
  • Is there a way to clone native functions in javascript like window.alert or document.write
  • how can I compare dates in array to find the earliest one?
  • Divide a $1 by 3 and adjusting 1 cent
  • cell spacing in div table
  • C#: Import/Export Settings into/from a File
  • Syntax error on tokens, AnnotationName expected instead - error on query
  • JSR-330 support in Picocontainer : @Inject … @Named(\"xxx)
  • Primefaces :radioButton inside a ui:repeat
  • How do I shift the decimal place in Python?
  • R convert summary result (statistics with all dataframe columns) into dataframe
  • How can I display the parent menu item's description using Wordpress walkers?
  • ListItem.Attributes.Add not working
  • Breaking out column by groups in Pandas
  • Unable to get column index with table.getColumn method using custom table Model
  • PHP buffered output depending on server setting?
  • Functions in global context
  • How to clear text inside text field when radio button is select
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Get object from AWS S3 as a stream
  • Is possible to count alias result on mysql
  • Cross-Platform Protobuf Serialization
  • Check if a string to interpolate provides expected placeholders
  • Validaiting emails with Net.Mail MailAddress
  • Do I've to free mysql result after storing it?
  • php design question - will a Helper help here?
  • bootstrap to use multiple ng-app
  • Matrix multiplication with MKL
  • How to get icons for entities from eclipse?
  • Hits per day in Google Big Query
  • File not found error Google Drive API
  • Turn off referential integrity in Derby? is it possible?
  • JaxB to read class hierarchy
  • Converting MP3 duration time
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How do I use LINQ to get all the Items that have a particular SubItem?