html定位问题,需要定位部分

时间:2019-03-18 10:11:59

标签: html css

您好,我一直在为网站编写html,并且想知道是否有人可以帮助我尝试让我的两部分“早期历史”和“欧洲采用”并排在“现代卡片”上方,对此有何建议?我不知道如何像这样定位他们,任何帮助将不胜感激

<!DOCTYPE html>
<html>


<head>
  <title>History</title>
  <link rel="stylesheet" type="text/css" href="../CSS/styles.css">
  <style>
    section {
      margin: 10px
    }
  </style>

</head>

<body>

  <!-- Page Header -->
  <header>
    <img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
    <img class="imageBannerRight" src="../images/bannerCardsRight.png">
    <h1>Playing Cards</h1>

  </header>

  <!-- Navigation Bar -->
  <nav>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="history.html">History</a></li>
      <li><a href="multi.html">Multi-player</a></li>
      <li><a href="single.html">Single-player</a></li>
      <li><a href="register.html">Free Cards</a></li>
    </ul>
  </nav>

  <!-- The main content of the page -->
  <main>
    <section>
      <h2>Early history</h2>
      <p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
        daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
      <p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
      <p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by play
        money known as "money cards".</p>
      <p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
    </section>

    <section>
      <h2>European Adoption</h2>
      <p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
        (or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
      <p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
      <p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
      <p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
    </section>

    <section>
      <img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
      <h2>Modern Cards</h2>
      <p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to merit
        their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
      <p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
        of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are a
        relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
    </section>



  </main>

  <!-- Page Footer -->
  <footer>
    <p> &copy; Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge@jlinternet.co.uk </p>
  </footer>

</body>

</html>

5 个答案:

答案 0 :(得分:1)

在前两个部分中添加一个类,并为其分配以下规则:

.myClass {
    display: inline-block;
    width: 50%;
}

这将使它们彼此相邻。当然,如果还有其他因素影响其宽度,则必须考虑到这一点(例如,相应地减小宽度)

答案 1 :(得分:0)

我认为您正在寻找符合以下条件的东西:

<!DOCTYPE html>
<html>


  <head>
    <title>History</title>
    <style>
      #parent {
        float: left;
      }

      #parent section {
        width: 45%;
        float: left;
        margin:10px
      }

    </style>

  </head>

  <body>

    <!-- Page Header -->
    <header>
      <img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
      <img class="imageBannerRight" src="../images/bannerCardsRight.png">
      <h1>Playing Cards</h1>

    </header>

    <!-- Navigation Bar -->
    <nav>
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="history.html">History</a></li>
        <li><a href="multi.html">Multi-player</a></li>
        <li><a href="single.html">Single-player</a></li>
        <li><a href="register.html">Free Cards</a></li>
      </ul>
    </nav>

    <!-- The main content of the page -->
    <main>

      <section id="parent">
        <section>
          <h2>Early history</h2>
          <p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
            daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
          <p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
          <p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by
            play money known as "money cards".</p>
          <p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
        </section>

        <section>
          <h2>European Adoption</h2>
          <p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
            (or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
          <p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
          <p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
          <p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
        </section>

      </section>
      <section>
        <img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
        <h2>Modern Cards</h2>
        <p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to
          merit their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
        <p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
          of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are
          a relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
      </section>


    </main>

    <!-- Page Footer -->
    <footer>
      <p> &copy; Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge@jlinternet.co.uk </p>
    </footer>

  </body>

</html>

我将您的部分包装在另一部分(parent)中,并稍微修改了CSS代码。

我放了width:45%,所以您可以保留margin:10px。否则我可能会设置width:50%

答案 2 :(得分:0)

尝试在父div上使用display:flex;

main {
  display: flex;
  width: 100%;
}
<!DOCTYPE html>
<html>


<head>
  <title>History</title>
  <link rel="stylesheet" type="text/css" href="../CSS/styles.css">


</head>

<body>

  <!-- Page Header -->
  <header>
    <img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
    <img class="imageBannerRight" src="../images/bannerCardsRight.png">
    <h1>Playing Cards</h1>

  </header>

  <!-- Navigation Bar -->
  <nav>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="history.html">History</a></li>
      <li><a href="multi.html">Multi-player</a></li>
      <li><a href="single.html">Single-player</a></li>
      <li><a href="register.html">Free Cards</a></li>
    </ul>
  </nav>

  <!-- The main content of the page -->
  <main>
    <section>
      <h2>Early history</h2>
      <p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
        daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
      <p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
      <p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by play
        money known as "money cards".</p>
      <p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
    </section>

    <section>
      <h2>European Adoption</h2>
      <p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
        (or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
      <p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
      <p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
      <p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
    </section>

 



  </main>
   <section>
      <img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
      <h2>Modern Cards</h2>
      <p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to merit
        their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
      <p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
        of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are a
        relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
    </section>
  <!-- Page Footer -->
  <footer>
    <p> &copy; Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge@jlinternet.co.uk </p>
  </footer>

</body>

</html>

答案 3 :(得分:0)

您也可以尝试css grid。就构建复杂的网格布局而言,它非常强大。

Documentation

.parentDiv {
  display: grid;
}

.firstChild {
  grid-column: 1;
  background-color: yellow;
}

.secondChild {
  grid-column: 2;
  background-color: lime;
}
<div class="parentDiv">
  <div class="firstChild">
    Column 1
  </div>
  <div class="secondChild">
    Column 2
  </div>
</div>

答案 4 :(得分:0)

加上Sven的答案,只需添加'float:left;'。到.myClass,然后将该类分配给相应的section元素:

.myClass{
  display: inline-block;
  width: 50%;
  float: left;
}