Question

我对CSS很陌生，我一直坚持这种情况。

我有一个标题，一个导航栏，一个主页和一个页脚。我想把两个部分放在main的一侧，但是它们被困在页脚里面。

我已经尝试在不同的网页上搜索，但我真的无法从中获取。

提前谢谢。

＆＃13;

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;
  }

＆＃13;

<!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 &hearts; by <span class="name"> GA </span></p>
        
       
    </footer>


    <script src="js/main.js"></script>
</body>

</html>

＆＃13;

Answer 1

如果您不关心响应性，一个解决方案是删除浮动并在包装元素上使用Display：flex

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;
  display:block;
}

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 {
 border: 1px solid black;

  background-color:#ccc;
}

#right-board {
 background-color:#bbb;
}
.wrapper{
  display:flex;
  padding:0;
}

<!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>
<div class="wrapper">
 <aside id="left-board" class="point-board">
    <h4>"Left"</h4>
  </aside>
  <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="right-board" class="point-board">"Right"</aside>
</div>
  <footer class="clearfix">

    <p class="copyright">Copyright 2017</p>
    <p class="message">Created with &hearts; by <span class="name"> GA </span></p>


  </footer>


  <script src="js/main.js"></script>
</body>

</html>

页脚内侧栏

1 个答案: