使用CSS的引脚板效果 [英] Pin-board effect with CSS

问题描述

查看此小提琴

我想要div 4 更高，所以它更接近div 1 ，但是边距完好无损，像 Pinterest 布告板样式布局，有没有人知道如何做？

HTML ：

; / div>
< div> 2< / div>
< div> 3< / div>
< div> 4< / div>
< div> 5< / div>

CSS：

  div {
 display：inline-block; 
 background-color：#CCC; 
 float：left; 
 width：200px; 
 margin：10px 20px; 
} 
 
 body {width：500px; } 
  

Div 4 紧贴其余。有关详情，请参阅小提琴。

什么我想要的是像此链接 16472917/1846192> j08691在下面的答案。

解决方案

您可以在使用 CSS多列布局，它将在IE9和旧版本中破坏。

这里是一个 jsFiddle 。我已经添加了一些div用于演示。

  html，body {
 height：100％ 
} 
 body {
 width：420px; 
 -webkit-column-count：2; 
 -webkit-column-gap：20px; 
 -moz-column-count：2; 
 -moz-column-gap：20px; 
 column-count：2; 
 column-gap：20px; 
 margin：20px; 
} 
 div {
 display：inline-block; 
 background-color：#CCC; 
 width：200px; 
 margin-bottom：20px; 
} 
  

主体的宽度设置为 420px ，该值目前是从div的两倍宽度+列间距的宽度派生的，您可以使用此值和列间隙值来在div的列之间添加更多或更少的空间。

如果您需要支持旧版浏览器，您可以查看 Columnizer jQuery Plugin 。

Take a look at this fiddle

I want div 4 to be higher so it's closer to div 1, but with the margins intact, sort of like the Pinterest pin-board style layout, does anyone know how to do that?

HTML:

<div>1<br/>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

CSS:

div {
  display:inline-block;
  background-color:#CCC;
  float:left;
  width:200px;
  margin:10px 20px;
}

body { width:500px; }

Div 4 doesn't fit in snuggly like the rest. See the fiddle for details.

What I want is something like this link provided by j08691 in an answer below.

解决方案

You can do something like the Pinterest layout in most current browsers using CSS multi-column layouts, it will break in IE9 and older versions.

Here's a jsFiddle. I have added some more div's for demonstration purposes.

html, body {
    height: 100%;
}
body {
    width: 420px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    margin: 20px;
}
div {
    display: inline-block;
    background-color:#CCC;
    width:200px;
    margin-bottom: 20px;
}

The width of the body is set to 420px, that value is currently derived from twice the width of a div + the width of the column gap, you could play with this value and the column gap value to add more or less space between the columns of div's.

If you need to support older browsers, you could have a look at the Columnizer jQuery Plugin.

这篇关于使用CSS的引脚板效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！