유체 레이아웃 : 주요 요소보다 큰 요소

제 주요 요소의 오른쪽에 제 옆 요소를 띄우기 위해 노력 중입니다. 어떤 이유로 인해 너무 큽니다. 주체의 너비를 60 %로 지정하고 나머지는 39 %로 지정하지만 (본체 요소가 99 %이기 때문에)이 비율은 올바르게 표시되지 않습니다.유체 레이아웃 : 주요 요소보다 큰 요소

* { 
 
    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>

출처

2017-05-08 A.Burger

난 당신 폭의 개념을 오해 생각 :

다음은 HTML과 CSS입니다. width을 main에서 60%으로 설정했습니다. 이 코드는 body 태그의 60%에만 적용됩니다. width을 aside으로 설정하고 39%으로 설정하지만이 요소의 부모는 main입니다. 즉 main 컨테이너의 39%에 해당합니다. 나는 당신의 질문을 이해할 수 있는지 모르겠다. (나는 지금 평판이 좋지 않다. 그래서 당신이 다음과 같은 것을 원한다고 생각한다.)

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

출처

2017-05-08 20:04:37

오 dear..it 내가 layout..I 작은 변화를 만들어이 페이지에 관한 또 다른 문제가있는 것 같다 난 후에 나의 제외하고 요소를 코딩 내 주요 요소로, 브라우저 창 크기를 줄이면 주요 요소가 맨 위에 머물러있게됩니다. 이제 옆쪽 요소가 몸체 요소를 넘치고 외부로 넘치게됩니다. 할 일이 무엇입니까? –

@ A.Burger가 새 게시물을 만듭니다. 적절한 정보와 스크린 샷을 추가하십시오. 이것은 다른 질문이며이 질문과 관련이 없습니다. 네가 해낸 후에, 우리는 대답 할 수있을거야. :) –

[link] https://codepen.io/primewizard/pen/YVYWbv?editors=1100 –

유체 레이아웃 : 주요 요소보다 큰 요소

답변

관련 문제