HTML定位问题,需要对部分进行定位。

3

嗨,我一直在为一个网站编写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>


使用 Boost 应用程序来进行您的网格操作。 - kealaxshan
jQuery和JavaScript???无关的标签... - doğukan
抱歉,它们是推荐的标签,我的大多数页面都在使用Java,真是抱歉哈哈。 - kezza1531
4个回答

1
在前两个部分中添加一个类,并将以下规则分配给它:
.myClass {
    display: inline-block;
    width: 50%;
}

这将使它们并排放置。当然,如果有其他因素影响它们的宽度,你需要考虑到这一点(例如,相应地减少宽度)。


它们已经出现了一半的大小(谢谢!),但是一个在另一个下面? - kezza1531
这是一个经典问题:你可以减少它们的宽度(例如49%如果这不会影响你),或者更新它们的父元素的字体大小为0,然后在子元素上手动设置。查看这个链接:https://dev59.com/Hmgv5IYBdhLWcg3wTvE- - Sven

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%


我已经运行了这个程序,但它们显示在彼此下方而不是并排。 - kezza1531
你在哪里运行这个程序?如果你在SO网站上运行,它们会并排显示... 你有其他的HTML包装器吗?或者你是在一个较小的屏幕上运行(比如手机/平板电脑)? - H. Figueiredo

0

Try using display:flex; on parent div

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>


0
你也可以尝试使用 cssgrid。它在构建复杂的网格布局方面非常强大。

文档

.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>


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接