响应式上移列答案

【问题标题】：Responsive move up column响应式上移列
【发布时间】：2017-03-09 02:49:30
【问题描述】：

对不起，如果这个问题已经回答了，我已经找过了。

我正在尝试创建一个 12 列的响应式布局。所有列都向左浮动。问题是我创建了一行，宽度为 100%。我想要下面两列。

第 1 列：应该是导航菜单，带有锚点
第 2 列：应该是演示的所有元素

我将 2 列放在该行的下方。第 1 列相当短，并一直向下移动。第 2 栏应保持不变。我想知道高度是否与它有关。所以我让两列的高度相同。没有帮助。我还尝试将下沉柱相对于移动它向上移动，这在桌面上看起来不错，但在移动设备上看起来很糟糕。请指教。

项目在这里：http://codepen.io/hherbst86/pen/OpbEzq

代码（css 和 html）：

CSS：

*{
  box-sizing: border-box;
}

.template-body{
    width: 100%;
    min-width: 320px;
    max-width: 1200px;
    margin: 0 auto;
}

.row{
    padding: 20px;
    width: 100%;
    min-height: 1px;
    float: left;
}

.col{
    min-height: 40px;
    border-radius: 8px;
    display: inline-block;
    margin-right: -4px;
}

.col.one {width: 8.33333%;;}
.col.two {width: 16.66667%;}
.col.three {width: 25%;}
.col.four {width: 33.33333%;}
.col.five {width: 41.66667%;}
.col.six {width: 50%;}
.col.seven {width: 58.33333%;}
.col.eight {width: 66.66667%;}
.col.nine {width: 75%;}
.col.ten {width: 83.33333%;}
.col.eleven {width: 91.66667%;}
.col.twelve {width: 100%;}


@media (max-width: 768px){

    .col{
        width: 100% !important;
    }
}

.col.three.index-panel{
  list-style-type: none;
  height: 2000px;
}

.index-panel ul{
  list-style-type: none;
}

.index-panel ul li{
  border: 1px solid black;
  padding: 20px;
}

HTML：

<head>
    <title>Title Goes Here</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="styles/css/nascent.css">
    <style type="text/css">
        section {
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>

<body class="template-body">
    <div class="row">
    <header>
        <img class="nascent-header__logo-image" src="images/BovAcademy_logo_head.png">
        <h1>Title Goes Here</h1>
        <h3>Title Description</h3>
    </header>
    </div>

    <div class="body-row row">

      <div class="col three index-panel">

                <nav class="index-panel"> 
                <ul>                     
                        <li><a href="#group01">Accordions</a></li>
                        <li><a href="#group02">Alerts</a></li>
                        <li><a href="#group03">Badges</a></li>
                        <li><a href="#group04">Breadcrumbs</a></li>
                        <li><a href="#group05">Buttons</a></li>
                        <li><a href="#group06">Cards</a></li>
                        <li><a href="#group07">Carousels</a></li>
                        <li><a href="#group08">Dropdowns</a></li>
                        <li><a href="#group09">Forms</a></li>
                        <li><a href="#group10">Footers</a></li>
                        <li><a href="#group11">List Groups</a></li>
                        <li><a href="#group12">Modals</a></li>
                        <li><a href="#group13">Pagination</a></li>
                        <li><a href="#group14">Progress Bar</a></li>
                        <li><a href="#group15">Tables</a></li>
                        <li><a href="#group16">Typography</a></li>
                </ul>
      </nav>
      </div>

        <div class = "col nine demo-sections">

            <section id="group01">
                <span><a href="#top">Go to top</a></span>
            </section>

            <section id="group02">
                <span><a href="#top">Go to top</a></span>
            </section> 

            <section id="group03">
                <span><a href="#top">Go to top</a></span>
            </section>

            <section id="group04">
                <span><a href="#top">Go to top</a></span>
            </section>                

            <section id="group05">
                <span><a href="#top">Go to top</a></span>
            </section>                

            <section id="group06">
                <span><a href="#top">Go to top</a></span>
            </section>                

            <section id="group07">
                <span><a href="#top">Go to top</a></span>
            </section>                

            <section id="group08">
               <span><a href="#top">Go to top</a></span>
            </section>                

            <section id="group09"> 
                <span><a href="#top">Go to top</a></span>
            </section>                

            <section id="group10">
                <span><a href="#top">Go to top</a></span>
            </section>                

            <section id="group11">
                <span><a href="#top">Go to top</a></span>
            </section>                

            <section id="group12">
                <span><a href="#top">Go to top</a></span>
            </section>                

            <section id="group13">
                <span><a href="#top">Go to top</a></span>
            </section>                

            <section id="group14">
                  <span><a href="#top">Go to top</a></span>
            </section>                          

            <section id="group15">
                <span><a href="#top">Go to top</a></span>
            </section>      

            <section id="group16">
                <span><a href="#top">Go to top</a></span>
            </section>

            <section id="group17">
                <span><a href="#top">Go to top</a></span>
            </section>


            <section id="group18">
                    <span><a href="#top">Go to top</a></span>
            </section>


            <section id="group19">
                <span><a href="#top">Go to top</a></span>
            </section>


            <section id="group20">
                <span><a href="#top">Go to top</a></span>
            </section>

        </div>
</div>

  <div class="row"></div>

</body>

【问题讨论】：

标签： html css responsive-design css-float css-position

【解决方案1】：

这是我的网格（12）工作出色，style.css

body {
  font-family: 'Nunito', sans-serif;
  font-weight: 100;
  font-size: 1em; /* 16px/16px = 1em */
  color: #000000;
}
.container{
  width: 90%;
  max-width: 1200px;
  padding: 0% 0; /* 0px/1200px = 0 */
  margin: 0 auto;
}

.container img {
  width: 100%;
}

.grid1{ width:8.33333333333333%;float:left; }       /* 100px/1200px=0,0833333333333333=8,33333333333333% */
.grid2{ width: 16.66666666666667%;float:left; }         /* 200px/1200px=0,1666666666666667=16,66666666666667% */
.grid3{ width: 25%;float:left; }            /* 300px/1200px=0,25=25% */
.grid4{ width:33.33333333333333%;float:left; }         /* 400px/1200px=0,3333333333333333=33,33333333333333% */


.grid5{ width:41.66666666666667%;float:left; }      /* 500px/1200px=0,4166666666666667=41,66666666666667% */
.grid6{ width:50%; float:left; }                /* 600px/1200px=0,5=50% */
.grid7{ width:58.33333333333333%; float:left; }     /* 700px/1200px=0,5833333333333333=58,33333333333333% */
.grid8{ width:66.66666666666667%; float:left; }                 /* 800px/1200px=0,6666666666666667=66,66666666666667% */
.grid9{ width:75%; float:left; }            /* 900px/1200px=0,75=75% */
.grid10{ width:83.33333333333333%; float:left; }                /* 1000px/1200px=0,8333333333333333=83,33333333333333% */
.grid11{ width:91.66666666666667%; float:left; }            /* 1100px/1200px=0,9166666666666667=91,66666666666667% */
.grid12{ width: 100%; float:left; }             /* 1200px/1200px=1=100% */

   @media screen and (max-width : 705px) {
.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9,
.grid10,
.grid11,
.grid12 {
  width: 100%;
}}

HTML 文档：

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
    <div class="grid12">
        First one row
    </div>
    <div class="grid6">
        Second row, first column
    </div>
    <div class="grid6">
        Second row, second column
    </div>
</div>
</body>
</html>

【讨论】：