对不起，如果已经回答了这个问题，我已经找了。
我正在尝试创建一个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>
答案 0 :(得分：0)
这个我的网格（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>