zoukankan      html  css  js  c++  java
  • [CSS] Introduction to CSS Columns

    Learn how to use CSS columns to quickly lay out fluid columns that are responsive, degrade gracefully and don't require extra markup.

    Notes:

    • column-width operates like min-width, not width. The browser will render as many columns as it can with the width provided. If each column can take up more than the value provided, they will do so.
    • column-span enables a specific element to ignore column-count and column-width. It can be set to an integer to span a certain number of columns, or "all" to span them all. However, this property does not work in Firefox. A workaround could be to move the element (say, a heading) outside of the container with the columns applied to it. That way, it remains outside of the automatic column flow.
    • column-fill allows you to change the way content flows into columns. By default, it's set to "balance", where content is distributed as much as possible between columns. It can also be set to "auto", but in order to do so, it requires setting a fixed height. This breaks the idea of fluid, responsive layouts, so use it with caution. You'll also need some browser prefixes, so be sure to reference thisbrowser support chart.
    <!DOCTYPE html>
    <html>
    
    <head>
      <link rel="stylesheet" href="styles.css">
    </head>
    
    <body>
      <section>
        <h class="title">News</div>
        <nav>
              
          <ul>
            <li><a href="#">World</a></li>
            <li><a href="#">U.S.</a></li>
            <li><a href="#">Politics</a></li>
            <li><a href="#">Business</a></li>
            <li><a href="#">Sports</a></li>
            <li><a href="#">Health</a></li>
            <li><a href="#">Tech</a></li>
            <li><a href="#">Science</a></li>
            <li><a href="#">Education</a></li>
            <li><a href="#">Books</a></li>
            <li><a href="#">Food</a></li>
            <li><a href="#">Movies</a></li>
            <li><a href="#">TV</a></li>
            <li><a href="#">Automobiles</a></li>
            <li><a href="#">Real Estate</a></li>
            <li><a href="#">Jobs</a></li>
            <li><a href="#">Art & Design</a></li>
            <li><a href="#">Travel</a></li>
            <li><a href="#">Subscribe</a></li>
            <li><a href="#">Archives</a></li>
          </ul>
        </nav>
      </section>
    </body>
    
    </html>
    /* Demo only styles */
    * {
      box-sizing: border-box;
    }
    
    body {
      background: #eee;
      font-family: 'Karla', sans-serif;
      font-size: 18px;
      font-weight: bold;
    }
    
    section {
      padding: 0 2rem;
      margin: 0 auto;
    }
    
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    li {
      padding: 0.5rem 0;
    }
    
    a {
      padding: 2px 5px;
      border-radius: 3px;
      color: #1A4390;
    }
    
    a:hover {
      text-decoration: none;
      background-color: #1A3490;
      color: #FFF;
    }
    
    nav{
      columns: 3 150px;
      column-gap: 3rem;
      column-rule: 1px dashed #ccc;
      column-fill: balance;
    }
    
    .title{
      column-span: all;
    }

  • 相关阅读:
    Unity c# 状态机的简单入门
    python实战教程之自动扫雷(自己存下来学习之用)
    Kubernetes的三种外部访问方式:NodePort、LoadBalancer和Ingress-十一(1)
    Ubuntu安装eclipse以及创建快捷方式
    Dockerfile-HEALTHCHECK指令
    各个版本Microsoft Visual C++运行库下载
    docker 远程连接设置
    centos7安装redis3.2.12
    Windows下允许redis远程访问
    UltraISO制作U盘启动盘-centos7
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5927727.html
Copyright © 2011-2022 走看看