流畅的布局：side元素大于main元素答案

【问题标题】：Fluid layout: aside element larger than main element流畅的布局：side元素大于main元素
【发布时间】：2017-10-06 20:09:43
【问题描述】：

我试图将我的侧边元素浮动到我的主要元素的右侧，但由于某种原因它太大了。我将 main 的宽度指定为 60%，将 side 的宽度指定为 39%（因为 body 元素是 99%），但不知何故，这个比例没有正确显示。

这里是html和css：

* {
  margin: 0;
  padding: 0;
}

html {
  background: url("/images/sheetmusic.gif") repeat 0 0;
  background-size: 30%;
  background-attachment: fixed;
  background-position: center;
}

body {
  font-family: arial, Helvetica, sans-serif;
  font-size: 100%;
  width: 99%;
  max-width: 800px;
  margin: 0 auto;
  background-color: rgba(255, 248, 228, 0.95);
  border: 2px solid #585858;
}

a:link {
  color: #e07400;
}

a:visited {
  color: gray;
}

a:hover,
a:focus {
  font-style: italic;
}


/*====================HEADER========================*/

header img {
  float: left;
  width: 100%;
  max-width: 136.078px;
}

.orange_header {
  color: #e07400;
}

header h1 {
  margin: 0 auto;
  font-size: 200%;
  text-shadow: 2px 1px 1px black;
  padding-top: 0.7em;
  padding-bottom: 0.5em;
}


/*====================NAV MENU========================*/

#nav_menu a {
  margin: 0;
  border-right: 1px solid silver;
}

#nav_menu a.current {
  color: white;
  display: block;
  background-color: #a78349;
}

#nav_menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  height: 34px;
}

#nav_menu>ul>li {
  float: left;
  width: 20.748125%;
  /* 165.985/800*100 */
}

#nav_menu ul li a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 0.5em 0;
  margin: 0;
  background-color: #ab6b06;
  color: white;
}

#nav_menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
}

#nav_menu ul ul li {
  float: none;
}

#nav_menu ul li:hover>ul {
  display: block
}

#nav_menu>ul::after {
  content: "";
  clear: both;
  display: block;
}

#lastmenuitem {
  border: none;
}


/*====================MAIN========================*/

main {
  display: block;
  position: relative;
  width: 60%;
}

main h2 {
  font-size: 150%;
  padding-top: 0.5em;
  padding-bottom: 0.2em;
  padding-left: 1em;
}

strong {
  color: #ab6b06;
}

main p {
  font-size: 100%;
  padding-left: 1.5em;
  padding-right: .5em;
  padding-bottom: 1em;
}

main ul,
ol {
  padding-left: 3em;
  padding-right: .5em;
  padding-bottom: 1em;
  line-height: 1.2em;
}


/*=============ASIDE====================*/

aside {
  display: block;
  float: right;
  width: 39%;
  margin-top: 1em;
  border-left: 2px solid #ab6b06;
}

aside h3 {
  font-size: 120%;
  margin-left: 1em;
  margin-bottom: 0.2em;
}

aside>p {
  padding: 0;
  margin-left: 1em;
  margin-right: .5em;
  word-wrap: break-word;
}

#sittingpic {
  padding-left: 2em;
}

blockquote {
  margin-left: 1em;
  margin-right: .5em;
  margin-bottom: 1em;
  text-indent: 0;
}

.image {
  position: relative;
  border: 1px solid #333;
  margin: 2%;
  margin-left: 1em;
}

.image img {
  width: 70%;
  max-width: 150px;
}

iframe {
  padding-left: 2em;
  width: 90%;
  max-width: 720px;
}


/*====================FOOTER========================*/

footer {
  background-color: #ab6b06;
  font-family: georgia, serif;
  font-size: 90%;
  text-align: center;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Annemie's Guitar School | Learn Classical Guitar</title>
  <link rel="shortcut icon" href="images/favicon.ico">
  <link rel="stylesheet" href="styles/normalize.css">
  <link rel="stylesheet" href="styles/main.css">
</head>

<body>
  <header>
    <img src="images/guitarlogo2.png" alt="Guitar" height="109.93">
    <h1 class="orange_header">Annemie's Guitar School</h1>
  </header>
  <nav id="nav_menu">
    <ul>
      <li><a href="index.html" class="current">Home</a></li>
      <li><a href="useful_links.html">Useful links</a></li>
      <li><a href="lesson_intro.html">Lessons</a>
        <ul>
          <li><a href="sittingpos.html">Sitting position</a></li>
          <li><a href="readingmusic.html">Reading music</a></li>
          <li><a href="rhtech.html">Right Hand Technique</a></li>
          <li><a href="lhtech.html">Left Hand Technique</a></li>
          <li><a href="pracandmem.html">Practising and Memorization</a></li>
        </ul>
      </li>
      <li><a href="bio.html" id="lastmenuitem">Bio</a></li>
    </ul>
  </nav>

  <main>
    <aside>
      <h3>History of the guitar</h3>
      <p>In this documentary, Julian Bream walks you through the history of the classical guitar in Spain. He plays pieces that are relevant to the different eras of the guitar. Although the documentary is fairly slow paced - it is worth the watch! <br>
        <a href="video.html">Watch video</a>
      </p>
      <h3>Anatomy of the guitar</h3>
      <img src="images/clas-diagram.jpg" alt="Guitar Diagram" class="image" height="300">
      <h3>Quote of the day</h3>
      <blockquote>&ldquo;Sometimes you want to give up the guitar, you&rsquo;ll hate the guitar. But if you stick with it, you&rsquo;re gonna be rewarded&rdquo; ~<cite> Jimi Hendrix</cite></blockquote>
    </aside>

    <h2 class="orange_header">Classical Guitar</h2>
    <p>The guitar is arguably the most popular and versatile instrument in the world. It is used in a variety of different musical styles like rock, blues, folk and pop. <strong>This school focusses on the classical style of playing. </strong> With classical
      guitar you use nylon strings and play all the voices (bass, alto, soprano) using a special right hand technique. The guitar becomes a &ldquo;mini orchestra&rdquo;.</p>

    <h2 class="orange_header">Before you start...</h2>
    <p>This school requires you to know a few basics before you can start the lessons. <br>We assume that you can:</p>
    <ul>
      <li>Tune your guitar</li>
      <li>Play chords comfortably</li>
      <li>Read tablature</li>
    </ul>
    <p>If you can&lsquo;t do these things - do not worry!<br> We suggest you make use of the <a href="useful_links.html">&ldquo;Useful links&rdquo;</a> page to teach yourself the basics of guitar.</p>
    <h2 class="orange_header">The Lessons</h2>
    <ol>
      <li><a href="sittingpos.html">Sitting position</a></li>
      <li><a href="readingmusic.html">Reading music</a></li>
      <li><a href="rhtech.html">Right Hand Technique</a></li>
      <li><a href="lhtech.html">Left Hand Technique</a></li>
      <li><a href="pracandmem.html">Practising and Memorization</a></li>
    </ol>
    <h2 class="orange_header">About Annemie</h2>
    <p>Find out more about the author of this site by going to <a href="bio.html">the Bio page.</a></p>

  </main>
  <footer>
    <p>&copy;2017, Annemie's Guitar School</p>
  </footer>
</body>

</html>

【问题讨论】：

标签： html css fluid-layout

【解决方案1】：

我认为您误解了宽度的概念。您将main 的width 设置为60%。这将仅涵盖body 标记的60%。您还将aside 的width 设置为39%，但此元素是main 的父元素。这意味着它将覆盖main 容器的39%。我不知道我是否理解你的问题（我现在没有声望向 cmets 询问更多细节）所以我认为你想要类似以下的东西（请原谅我的绘画技巧不好）：

click to see the image

我建议进行以下更改：

首先创建一个新的div 元素（我将其命名为main-content）并在其中添加左侧浮动内容。

<main>
    <aside>
      <h3>History of the guitar</h3>
      <p>In this documentary, Julian Bream walks you through the history of the classical guitar in Spain. He plays pieces that are relevant to the different eras of the guitar. Although the documentary is fairly slow paced - it is worth the watch! <br>
        <a href="video.html">Watch video</a>
      </p>
      <h3>Anatomy of the guitar</h3>
      <img src="images/clas-diagram.jpg" alt="Guitar Diagram" class="image" height="300">
      <h3>Quote of the day</h3>
      <blockquote>“Sometimes you want to give up the guitar, you’ll hate the guitar. But if you stick with it, you’re gonna be rewarded” ~<cite> Jimi Hendrix</cite></blockquote>
    </aside>

  <!-- the newly created div -->
  <div id="main-content">
    <h2 class="orange_header">Classical Guitar</h2>
    <p>The guitar is arguably the most popular and versatile instrument in the world. It is used in a variety of different musical styles like rock, blues, folk and pop. <strong>This school focusses on the classical style of playing. </strong> With classical
      guitar you use nylon strings and play all the voices (bass, alto, soprano) using a special right hand technique. The guitar becomes a “mini orchestra”.</p>

    <h2 class="orange_header">Before you start...</h2>
    <p>This school requires you to know a few basics before you can start the lessons. <br>We assume that you can:</p>
    <ul>
      <li>Tune your guitar</li>
      <li>Play chords comfortably</li>
      <li>Read tablature</li>
    </ul>
    <p>If you can‘t do these things - do not worry!<br> We suggest you make use of the <a href="useful_links.html">“Useful links”</a> page to teach yourself the basics of guitar.</p>
    <h2 class="orange_header">The Lessons</h2>
    <ol>
      <li><a href="sittingpos.html">Sitting position</a></li>
      <li><a href="readingmusic.html">Reading music</a></li>
      <li><a href="rhtech.html">Right Hand Technique</a></li>
      <li><a href="lhtech.html">Left Hand Technique</a></li>
      <li><a href="pracandmem.html">Practising and Memorization</a></li>
    </ol>
    <h2 class="orange_header">About Annemie</h2>
    <p>Find out more about the author of this site by going to <a href="bio.html">the Bio page.</a></p>
  </div>
  <!-- new div ends here -->


  </main>

然后将您的 css 样式更改为：

/* we removed the width property to cover the whole page. */
main {
  display: block;
  position: relative;
}

aside {
  display: block;
  float: right;
  width: 40%; /* this was changed */
  margin-top: 1em;
  border-left: 2px solid #ab6b06;
}

#main-content {
  width: 60%; 
}

【讨论】：

哦，亲爱的..关于这个页面布局，我似乎还有另一个问题..我做了一个小改动：我在我的主要元素之后编码了我的 Aside 元素，以便主要元素保持在顶部当我将浏览器窗口调整为更小的尺寸时。现在，side 元素刚刚溢出到 body 元素之外......该怎么办？
@A.Burger 创建一个新帖子。在此处添加适当的信息和屏幕截图。这是一个不同的问题，与这个问题无关。您完成后，我们将能够回答。 :)