html - 流体布局 : aside element larger than main element

标签 html css fluid-layout

我试图将我的 aside 元素 float 到我的 main 元素的右侧，但由于某种原因它太大了。我将主要部分的宽度指定为 60%，将旁边部分的宽度指定为 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>

最佳答案

我认为您误解了宽度的概念。您将 main 的 width 设置为 60%。这将仅覆盖 body 标记的 60%。您还将 aside 的 width 设置为 39%，但此元素是 main 的父元素。这意味着它将覆盖 main 容器的 39%。我不知道我是否理解你的问题(我现在没有资格要求更多细节和评论)所以我认为你想要类似下面的东西(原谅我糟糕的绘画技巧):

click to see the image

我建议进行以下更改:

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

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

关于html - 流体布局 : aside element larger than main element，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43854152/

上一篇：jquery - 在 jQuery css 语句上设置符号的编号

下一篇：css - 当鼠标悬停在标签上时，如何将标签更改为不同的标签？

相关文章：

javascript - jQuery:隐藏带有点击事件的菜单

javascript - Google Plus One 按钮后端错误 -32099

html - 使用 innerHTML 将 <details> 元素附加到 div 时，div 也会变为 "down"

html - 流体布局问题

css - 960.gs 的固定-流体-固定布局

html - 从 html 页面访问查询字符串/参数

javascript - 垂直制表符在 github 上显示不正确

html - 在 bootstrap 3 中降低导航栏的高度

javascript - 如何在 iframe 中设置动态创建的元素的样式？

html - CSS:3 列高度 100%

©2024 IT工具网  联系我们