代码之家  ›  专栏  ›  技术社区  ›  tomislav_t

将单元均匀分布在Zurb基础6的立柱上

zurb-foundation css html
  •  0
  • tomislav_t  · 技术社区  · 7 年前

    我正在构建一个应用程序布局,其中我希望在多个列上均匀地布局一些列出超链接的卡片。这样屏幕空间将被合理使用。

    我使用的是Zurb Foundation 6,基于Zurb Foundation 6有以下HTML: 

    <!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <base href="/">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0=" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="grid-y small-up-1 medium-up-3 large-up-6">
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 1
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 2
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 3
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 4
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 5
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 6
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 7
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 8
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 9
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk=" crossorigin="anonymous"></script>
</body>
</html>

    现在我把所有的卡片都放在一列中,浏览器中有一个垂直滚动条。

    是否有可能将卡片显示在多个栏中,例如中3栏和大6栏?

    1 回复  |  直到 7 年前
        1
  •  1
  •   Tim    7 年前

    你可以看看这个代码笔:

    https://codepen.io/dudleystorey/pen/yqrhw

    (在大屏幕上看起来更好) 

    @font-face{font-family:'Calluna';
 src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/callunasansregular-webfont.woff') format('woff');
}
body {
	background: url(//subtlepatterns.com/patterns/scribble_light.png);
  font-family: Calluna, Arial, sans-serif;
  min-height: 1000px;
}
#columns {
	column-width: 320px;
	column-gap: 15px;
  width: 90%;
	max-width: 1100px;
	margin: 50px auto;
}

div#columns figure {
	background: #fefefe;
	border: 2px solid #fcfcfc;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	margin: 0 2px 15px;
	padding: 15px;
	padding-bottom: 10px;
	transition: opacity .4s ease-in-out;
  display: inline-block;
  column-break-inside: avoid;
}

div#columns figure img {
	width: 100%; height: auto;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 5px;
}

div#columns figure figcaption {
  font-size: .9rem;
	color: #444;
  line-height: 1.5;
}

div#columns small { 
  font-size: 1rem;
  float: right; 
  text-transform: uppercase;
  color: #aaa;
} 

div#columns small a { 
  color: #666; 
  text-decoration: none; 
  transition: .4s color;
}

div#columns:hover figure:not(:hover) {
	opacity: 0.4;
}

@media screen and (max-width: 250px) { 
  #columns { column-gap: 0px; }
  #columns figure { width: 100%; }
}
    <div id="columns">
  <figure>
  <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg">
	<figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
	</figure>
	
	<figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rapunzel.jpg">
	<figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
	</figure>
	
  <figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/belle.jpg">
	<figcaption>Belle, based on 1770’s French court fashion</figcaption>
	</figure>
  
	<figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mulan_2.jpg">
	<figcaption>Mulan, based on the Ming Dynasty period</figcaption>
	</figure>
	
   <figure>
	 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sleeping-beauty.jpg">
	<figcaption>Sleeping Beauty, based on European fashions in 1485</figcaption>
	</figure>
	
   <figure>
	 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocahontas_2.jpg">
	<figcaption>Pocahontas based on 17th century Powhatan costume</figcaption>
	</figure>
  
	<figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/snow-white.jpg">
	<figcaption>Snow White, based on 16th century German fashion</figcaption>
	</figure>	
  
   <figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ariel.jpg">
	<figcaption>Ariel wearing an evening gown of the 1890’s</figcaption>
	</figure>
  
    <figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/tiana.jpg">
    <figcaption>Tiana wearing the <i>robe de style</i> of the 1920’s</figcaption>
	</figure>	
  <small>Art &copy; <a href="//clairehummel.com">Claire Hummel</a></small>
	</div>

    以实现类似pinterest的布局。其中可以有多个列和不同的高度。

    推荐文章
    Softly  ·  单选按钮未按预期取值
    1 年前
    NovoMannen  ·  导航中的下拉菜单在内容后面重叠
    1 年前
    Thirumal isireddy  ·  在导航栏顺风css中,img被扭曲,而不是将元素推到旁边
    1 年前
    eXor420  ·  如何在脚本标记中使用导出的函数?
    1 年前
    Hadi  ·  如何在无效和有效输入中选择用于更改样式的psoudo元素(after)
    1 年前
    IonicMan  ·  剑道网格在宽度过大时不显示某些列
    1 年前
    Kernier  ·  如何将数学公式支持添加到StacksEditor?
    1 年前
    Md. Ibrahim  ·  CSS网格项溢出小屏幕滚动
    1 年前
    Arjun V Srivatsa  ·  如何将系统时区信息分配给javascript中的变量?
    1 年前
    Akshay mek  ·  Vscode扩展建议不适用于某些文件夹
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号