如何把瓷磚正常浮動沒有間隙

在我的網頁中我有一些瓷磚。我想用兩個色彩展示瓷磚。在前兩個瓦片後面的兩個瓦片應該在其正下方。由於高度可變，我無法使其正常工作。如何把瓷磚正常浮動沒有間隙

這是我到目前爲止。

HTML：

<div class = "content" style="color:Red"> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
</div> 
<div class = "content" style="color:green"> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
</div> 
<div class = "content" style="color:black"> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
</div> 
<div class = "content" style="color:blue"> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
</div>

CSS：

.content { 
    border: solid 1px #C8C8C8; 
    -moz-border-radius: 25px; 
    width :45%; 
    height : auto; 
    float:left; 
    margin-left: 10px; 
    margin-top:20px; 
    box-shadow: 3px 3px 3px 0px #C8C8C8; 
    cursor:pointer; 
}

如果

http://jsfiddle.net/yKuBr/

來源

2013-03-01 javaMan

你希望他們在頂部或東西排隊，因爲據我可以看到下方的兩個是排名前兩位的下面？ – Kristian82 2013-03-01 16:30:40

你在這裏瞄準什麼樣的模式？每排兩個容器？ – Amberlamps 2013-03-01 16:30:47

您可以添加一個clearfix。一個div元素清除所有花車並重新開始流程。

http://jsfiddle.net/yKuBr/2/

來源

2013-03-01 16:33:48

隨着你的改變，我看到綠色和藍色之間的一些差距。我想看到所有瓷磚間距相等。這是可能的 – javaMan 2013-03-01 16:37:53

要更清楚地在這個鏈接http://isotope.metafizzy.co/假設每個顏色是格，他們都是平等的間距。我想這樣做。 – javaMan 2013-03-01 16:42:05

啊我明白你的意思了，你可以做這樣的事情http://jsfiddle.net/yKuBr/3/在左邊和右邊加上他們自己的容器 – 2013-03-01 16:44:02

不知道我理解你的問題，但你可能想要把一類奇數編號的塊和clear:left。我更新了你的fiddle。

來源

2013-03-01 16:31:09 Sunyatasattva

也可以是'.content：n-child（2n + 1）'而不是其他類。 – xpy 2013-03-01 16:34:55

隨着你的改變，我看到綠色和藍色之間的一些差距。我想看到所有瓷磚間距相等。這是可能的 – javaMan 2013-03-01 16:38:28

要更清楚地在這個鏈接http://isotope.metafizzy.co/假設每個顏色是格，他們都是平等的間距。我想這樣做。 – javaMan 2013-03-01 16:40:44

如果你要創建某種平鋪的，具有可變大小的容器，我強烈建議使用一個偉大的jQuery插件稱爲Isotope

來源

2013-03-01 16:35:23

刪除浮動：左並添加顯示：inline-block

希望它有幫助！

來源

2013-03-01 16:39:53

我想你要找的是什麼inline-block：

HTML

<div class = "content ib" style="color:Red"> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
</div> 
<div class = "content ib" style="color:green"> 
    <p> hi</p> 
    <p> hi</p> 
    <p> hi</p> 
</div>

等等，等等，那麼在你的CSS：

.ib { 
    float:none; 
    display:-moz-inline-stack; 
    display:inline-block; 
    vertical-align:top; 
}

你可以看到修改後的版本你的小提琴here。

如果您需要支持IE6或7，可以通過設置zoom來觸發hasLayout。如果您想了解更多信息，請登錄Robert Nyman。

來源

2013-03-01 16:47:25 ultranaut

這可以用CSS列完成，儘管browser support是有限的（即直到IE10爲止在IE中不支持）。請參閱demo或下面的代碼。

CSS

.content { 
    border: solid 1px #C8C8C8; 
    -moz-border-radius: 25px; 
    margin-left: 10px; 
    margin-bottom:20px; 
    box-shadow: 3px 3px 3px 0px #C8C8C8; 
    cursor:pointer; 
    display:block; 
    width:95% 
} 

.cols { 
    -webkit-column-count:2; 
    -webkit-column-gap:10px; 
    -moz-column-count: 2; 
    -moz-column-gap: 10px; 
}

HTML

<div class="cols"> 
    <div class="content" style="color:Red"></div> 
    <div class="content" style="color:green"></div> 
    <div class="content" style="color:black"></div> 
    <div class="content" style="color:blue"></div> 
</div>

來源

2013-03-01 16:47:55 andyb

如何把瓷磚正常浮動沒有間隙

回答

相關問題