Why does a 3 column layout fail so hard?

问题

In the first snippet, you should see 4 images grouped to just the left 2 columns:
[+][+][ ]
[+][+]

and not spread across all 3 columns as I would have expected:
[+][+][+]
[+]

Worse yet, even 3 items in a 3 column layout fails! I get this in Chrome:
[+][+][ ]
[+]

instead of this (which seems obvious):
[+][+][+]

Dear God why? Is it a bug? Or is it that the height of the column is not explicitly set? Explicit height would be a poor requirement of columns as far as fluid/dynamic content is concerned (which is my case).

4 items in 3 columns (fails in Chrome and Firefox)

p{
  -moz-column-count: 3;
  column-count: 3;
  -moz-column-gap: 0;
  column-gap: 0;
  -moz-column-fill: balance;
  column-fill: balance;
  outline:1px solid gray;
}

img{
  display: inline-block;
  width: 100%;
  height: auto;
  vertical-align: top;
  padding: 4px;
  box-sizing: border-box;
}

<p>
  <img src="http://placehold.it/300x250">
  <img src="http://placehold.it/300x300">
  <img src="http://placehold.it/300x300">
  <img src="http://placehold.it/300x250">
</p>

3 items in 3 columns (fails in Chrome)

p{
  -moz-column-count: 3;
  column-count: 3;
  -moz-column-gap: 0;
  column-gap: 0;
  -moz-column-fill: balance;
  column-fill: balance;
  outline:1px solid gray;
}

img{
  display: inline-block;
  width: 100%;
  height: auto;
  vertical-align: top;
  padding: 4px;
  box-sizing: border-box;
}

<p>
  <img src="http://placehold.it/300x300">
  <img src="http://placehold.it/300x300">
  <img src="http://placehold.it/300x300">
</p>

https://jsfiddle.net/5wrpcky9/

回答1:

(edit: added some more examples)

CSS column-count means that the content is put first into the first row (below each other), then into the second column and then into the third (and so forth, if there are more). I.e. a vertically oriented order of placement.

The height of the containing element (in your case the p tag) is dynamically determined by the content - the content is split evenly across all columns as much as possible, which in your case isn't really possible - 4 images in three columns, threfore the uneven distribution of content. Look at this variation of your fiddle, where I made the fourth image a bit higher, causing the fourth image to go into the third column: https://jsfiddle.net/r002yvv3/

Try to use six images, then you'll see what I mean. (https://jsfiddle.net/f7k4fph2/1/). You see that even better if you just use some text, see this example: https://jsfiddle.net/p00syos5/

For what you want to achieve you better use float:left on the images instead of column-count in the paragraph. (https://jsfiddle.net/euuvf00z/1/) But in this case the heights should match...

And one more note: In real life you wouldn't assign the column properties to a p tag, but to a div container into which you put p blocks, images etc: https://jsfiddle.net/ygpk8pkc/

回答2:

U can try something like this:

<html>
	<head>
		<style>
			p{
			    -moz-column-count: 3;
			    column-count: 3;
			    -moz-column-gap: 0;
			    column-gap: 0;
			}

			img{
				float: left; /*add*/
			    display: inline-block;
			    width: 100%;
			    height: auto;
			    vertical-align: top;
			    padding: 4px;
			    box-sizing: border-box;
			}

		</style>
	</head>
	
	<body>
		<p>
		    <img src="http://placehold.it/300x250">
		    <img src="http://placehold.it/300x300">
		    <img src="http://placehold.it/300x300">
		</p>

		<p>
		    <img src="http://placehold.it/300x250">
		</p>
	</body>
</html>

来源：https://stackoverflow.com/questions/40939831/why-does-a-3-column-layout-fail-so-hard

标签

html

css

css-multicolumn-layout