1
죄송합니다. 이미 답변을 드린 경우이를 찾아 보았습니다.응답 성 높은 위로 이동
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>