如何對齊格垂直像圖片

-1

<div class="group"> 
<span class="big-letters"></span> 
<a>links 1</a> 
<a>links 2</a> 
<a>links 3</a> 
</div> 
<div class="group"> 
<span class="big-letters"></span> 
<a>links 1</a> 
<a>links 2</a> 
<a>links 3</a> 
</div> 
<div class="group"> 
<span class="big-letters"></span> 
<a>links 1</a> 
<a>links 2</a> 
<a>links 3</a> 
</div> 
<div class="group"> 
<span class="big-letters"></span> 
<a>links 1</a> 
<a>links 2</a> 
<a>links 3</a> 
</div>

一個HTML代碼寫好我的代碼，有額外的CSS我得到這個輸出中

code result

但是，這是什麼是假設是預期的輸出 expected result

任何人都知道如何完成這一點只使用CSS和與加入添加div包裝器。其目的是讓它很容易適應任何設備的屏幕。愛知道是否有其他方式來做到這一點。

（如果這是一個重複的職位好心立即通知我，給我其他類似的帖子的鏈接我找不到像這樣的東西，因爲我不能確定準確的關鍵字來。謝謝）

來源

2014-09-19 andrex

你想砌體網格嘗試搜索谷歌你會得到幫助 – himanshu 2014-09-19 06:49:41

我很想聽聽那些投票給你失望的人的原因，這是一個非常有趣的問題 – Devin 2014-09-19 07:32:42

可能是因爲這是一個問題，如何做某件事，並沒有顯示任何實際的嘗試從他們如何嘗試做它的原始海報..我猜 – Lee 2014-09-19 07:56:07

，你可以這樣做：

.box { 
    width:60%; 
    -webkit-column-count: 3; 
    /* Chrome, Safari, Opera */ 
    -moz-column-count: 3; 
    /* Firefox */ 
    column-count: 3; 
} 
.group { 
    width:60%; 
    display:inline-block; 
    height:auto; 
    background:#ededed; 
    border:1px solid #ccc; 
    margin:20px; 
    padding:20px; 
} 
.group a { 
    display:block; 
    width:100%; 
    margin:10px auto; 
} 
.big-letters { 
    font-size:30px; 
    color:#f60; 
    display:block; 
}

see fiddle

這樣你就可以保持這種「蛇」（最多 - >關閉並再次啓動）命令，而不是通常的HTML浮動從左到右

來源

2014-09-19 07:28:20 Devin

這對我有幫助，我也在這裏http://w3bits.com/demo/中跟着一個例子。響應css砌體/ 我想沒有辦法避免使用媒體查詢。 – andrex 2014-09-19 08:24:53

試使用這樣的列數：

<html> 
<head> 
<style type="text/css"> 
body{ 
width: 100%; 
max-width: 800px; 
-moz-column-count:3; 
    -moz-column-gap: 3%; 
    -moz-column-width: 30%; 
    -webkit-column-count:3; 
    -webkit-column-gap: 3%; 
    -webkit-column-width: 30%; 
    column-count: 3; 
    column-gap: 3%; 
    column-width: 30%;} 
.group {  
    border: 1px solid black; 
    margin: 0 5px 5px 0;  
} 
.group a{ 
    display: list-item; 
} 
.big-letters{ 
    font-size: 44px; 
    color: red; 
} 
</style> 
</head> 
<body> 
<div class="group"> 
<span class="big-letters">A</span> 
<a href="#">links 1</a> 
<a href="#">links 2</a> 
<a href="#">links 3</a> 
<a href="#">links 1</a> 
<a href="#">links 2</a> 
<a href="#">links 3</a> 
</div> 
<div class="group"> 
<span class="big-letters">B</span> 
<a href="#">links 1</a> 
</div> 
<div class="group"> 
<span class="big-letters">C</span> 
<a href="#">links 1</a> 
<a href="#">links 2</a> 
<a href="#">links 3</a> 
</div> 
<div class="group"> 
<span class="big-letters">D</span> 
<a href="#">links 1</a> 
<a href="#">links 2</a> 
<a href="#">links 3</a> 
</div> 
<div class="group"> 
<span class="big-letters">E</span> 
<a href="#">links 1</a> 
<a href="#">links 2</a> 
<a href="#">links 3</a> 
</div> 
<div class="group"> 
<span class="big-letters">F</span> 
<a href="#">links 1</a> 
<a href="#">links 2</a> 
<a href="#">links 3</a> 
</div> 
<div class="group"> 
<span class="big-letters">G</span> 
<a href="#">links 1</a> 
<a href="#">links 2</a> 
<a href="#">links 3</a> 
</div> 
<div class="group"> 
<span class="big-letters">H</span> 
<a href="#">links 1</a> 
<a href="#">links 2</a> 
<a href="#">links 3</a> 
</div> 
<div class="group"> 
<span class="big-letters">I</span> 
<a href="#">links 1</a> 
<a href="#">links 2</a> 
<a href="#">links 3</a> 
</div> 
</body> 
</html>

希望它能幫助你。

來源

2014-09-19 07:27:23 amul

在這裏一些參考：http：//溢價。 wpmudev.org/blog/add-masonry-grid-layouts-to-your-wordpress-site-with-just-css/ – amul 2014-09-19 07:31:50

如何對齊格垂直像圖片

回答

相關問題