zoukankan      html  css  js  c++  java
  • CSS实现响应式布局(自动拆分几列)

    1.css代码

    <style type="text/css">
    
    
            .container{
                margin-top: 10px;
            }
    
            .outerDiv{
                float:left;
                width:100%;
            }
    
            /* 大于648像素一行两个div,innerDiv两个宽度为:(300+4+20)*2 */
            @media screen and (min- 648px){
                .outerDiv {
                    width: 50%
                }
            }
    
            .innerDiv{
                min-width: 300px;
                height: 80px;
                border-radius: 10px;
                border: 2px solid #4a403f;
                margin: 2px 10px;
                background-color: #99ccff;
                color:#beb2b2;
                font-family: Arial;
                font-size:18px;
            }
    
    
        </style>

    2.网页代码

    <div class="container">
    
        <div class="outerDiv">
            <div class="innerDiv">
    
            </div>
        </div>
    
        <div class="outerDiv">
            <div class="innerDiv">
    
            </div>
        </div>
    
        <div class="outerDiv">
            <div class="innerDiv">
    
            </div>
        </div>
    
        <div class="outerDiv">
            <div class="innerDiv">
    
            </div>
        </div>
    
        <!-- 清除浮动 -->
        <div style="clear: both"></div>
    </div>

    3.总结

     容器里的outerDiv作为布局模块,宽度由窗口大小决定拆分比例,采用流动布局。innerDiv作为布局模块里面的真正内容,宽度不要指定100%,否则加上边框无法计算了。模块之间的间隔,需在innerDiv里面设置margin。

  • 相关阅读:
    Oracle-启动和关闭oracle的归档(ARCHIVELOG)模式
    Linux-数据表示方式
    Linux-21-30
    linux-1-10
    自律
    jenkins-修改系统时间
    jenkins-通过ssh username with private key配置节点服务器
    jenkins-slave开机自动启动
    mongodb-mongo使用
    mongodb-centos76yum安装mongodb
  • 原文地址:https://www.cnblogs.com/hdwang/p/8134784.html
Copyright © 2011-2022 走看看