1
저는 CSS에 익숙하지 않아 이런 상황에 처해 있습니다.바닥 글 안의 사이드 열
헤더, 탐색 모음, 기본 및 바닥 글이 있습니다. 나는 메인의 측면에 두 개의 섹션을 넣고 싶지만 바닥 글 안에 갇혀있다.
나는 이미 다른 페이지를 검색하려고했지만 실제로 이것으로부터 나올 수는 없다.
미리 감사드립니다. 당신이 응답과 관련되지 않은 경우
body {
text-align: center;
margin: 0;
}
h1 {
font-family: Raleway;
color: white;
letter-spacing: 1px;
font-weight: 400;
font-size: 45px;
margin: 0;
}
a {
font-family: Raleway;
letter-spacing: 1px;
font-weight: 400;
font-size: 18px;
border-bottom: 2px solid transparent;
}
a:hover {
border-bottom: 2px solid white;
}
h2 {
font-family: Raleway;
color: #0d2c40;
letter-spacing: 1px;
font-weight: 600;
font-size: 20;
}
p {
font-family: "Droid Serif";
line-height: 26px;
font-size: 18px;
}
header {
background-color: #F15B31;
padding: 30px 20px;
}
main {
width: 850px;
margin: 35px auto;
}
nav {
background: #00A6B3;
padding:20px 0;
}
.navlink {
margin:0 20px;
color: white;
}
img {
margin: 40px 8px;
}
footer {
background-color:#0D2C40;
text-transform: uppercase;
padding: 0 20px;
color: white;
font-size: 14px;
letter-spacing: .08em;
font-weight: 500;
}
.copyright {
font-family: Raleway, sans-serif;
float: left;
}
.message{
font-family: Raleway, sans-serif;
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
content: " ";
clear: both;
height: 0;
font-size: 0;
}
.name {
color:#F15B31;
font-weight: 700;
}
.point-board {
border: 1px, solid, black;
}
aside {
float: left;
margin: 35px auto;
border: 1px solid white;
}
#right-board {
float: right;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif|Raleway:400,500,600,700" rel="stylesheet">
<title>Marco's memory game</title>
</head>
<body>
<header>
<h1>Marco's memory game</h1>
</header>
<nav>
<a class="navlink" href="#instructions">Instructions</a>
<a class="navlink" href="#facts">Game facts</a>
<a class="navlink" href="#game-board">Play!</a>
</nav>
<main>
<h2 id="instructions">Instructions</h2>
<p>Concentration, also known as Match Match, Memory, Pelmanism, Shinkei-suijaku, Pexeso or simply Pairs, is a card game
in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The
object of the game is to turn over pairs of matching cards.</p>
<h2 id="facts">Game's facts</h2>
<p>An other popular memory game is called "Kim's game. Kim's Game is a game or exercise played by Boy Scouts, Girl Scouts
and Girl Guides, and other children's groups.[1] The game develops a person's capacity to observe and remember
details. The name is derived from Rudyard Kipling's 1901 novel Kim, in which the hero, Kim, plays the game during
his training as a spy.
<a href="https://en.wikipedia.org/wiki/Kim%27s_Game">More info...</a>
</p>
<div id="game-board" class="board clearfix"></div>
</main>
<aside id="left-board" class="point-board"><h4>"Left"</h4></aside>
<div id="right-board" class="point-board">"Right"</div>
<footer class="clearfix">
<p class="copyright">Copyright 2017</p>
<p class="message">Created with ♥ by <span class="name"> GA </span></p>
</footer>
<script src="js/main.js"></script>
</body>
</html>
에 플렉스 모바일 뷰에서 '메인'아래에 이러한 사이드 바가 있어야한다고 가정합니다. – UncaughtTypeError
@UncaughtTypeError 지금은 모바일을 고려하고 있지 않습니다. 부트 캠프를 코딩하기위한 준비 작업. – Marco