CSS - 定位拋開HTML元素框

Question

我'學習HTML5和CSS3現在。我不得不說，我是一個初學者。我的問題：我想在文章旁放置一個旁邊的元素文本框。文本框應該出現在右側。我已經測試了一些東西，但是沒有任何東西會導致我的目標請讓我知道我該怎麼做？那麼頁腳怎麼樣？爲什麼它不在正確的位置（主要邊緣被忽略）。

<main role="main"> 

<article> 
    <h2>Willkommen auf dieser Seite</h2> 
    <div class="texte"> 
    <section> 
     <h2>Artikelüberschrift</h2> 
     <p>lorem ipüsum geerer nerne enenekn jnsjnfsdlnf sdflnslfnsdf 
     skjnsfksjdn sdfjfnskfjndsf dsjfdfjn fgsk sndfns sfdkjnsf sjfnsdf 
     sdfjnsdfn sfjdkjdfsnsdfk fsnksdf dsfkjn dfkjnskd</p> 
     <p>fdjn fjerg reojn rjng jnrg orng ojgn jfng rjng erjng oerjng 
     ndrjgn oerng ng dfjng dfjng dfjng odfngodsgn odifngod fng 
      jdfjgn dkjgndfjngsdfjgnsdfugniuvndsiugnerogunerüoig 
      dfjnsdondf n on on on erung oirnfgorne oe eongöfjgns 
      agodjng skjfgbpsieurgtsdjknipseuhtfgndfslng fngk jnsrogn 
      jkgndgjn</p> 
    </section> 
    <section> 
     <h2>Artikelüberschrift2</h2> 
     <p>lorem ipüsum geerer nerne enenekn jnsjnfsdlnf sdflnslfnsdf 
     skjnsfksjdn sdfjfnskfjndsf dsjfdfjn fgsk sndfns sfdkjnsf sjfnsdf 
     sdfjnsdfn sfjdkjdfsnsdfk fsnksdf dsfkjn dfkjnskd</p> 
     <p>fdjn fjerg reojn rjng jnrg orng ojgn jfng rjng erjng oerjng 
     ndrjgn oerng ng dfjng dfjng dfjng odfngodsgn odifngod fng 
      jdfjgn dkjgndfjngsdfjgnsdfugniuvndsiugnerogunerüoig 
      dfjnsdondf n on on on erung oirnfgorne oe eongöfjgns 
      agodjng skjfgbpsieurgtsdjknipseuhtfgndfslng fngk jnsrogn 
      jkgndgjn</p> 
    </section> 
    <div> 

</article> 
    <div class="sidebox"> 
    <aside> 
     <p>ich in eine asidebox nkdsfnk fnskjnfdskj fsnkfsdkjnf 
     sdfjlsdjfos fsdojf sjfosijfosd fsjfosdjf spdijf sdofij 
     sdfijsodfj sdoifj osd jod jodsifjo ijsdof</p> 
     <p>djfngdkjfngdfj fjgn dkjn ekn dng odrnjg odn dfjng 
     ndfojgndo indofign odfing doifng odifng dofign oidfng</p> 
    </aside> 
    </div 


</main> 

<footer> 
    <!-- Kontakt, Links, Impressum --> 
    <a href="#kontakt.html">Kontakt</a> 
    <a href="#kontakt.html">Impressum</a> 
    <a href="#kontakt.html">Links</a> 
</footer> 

</body> 
</html> 

CSS

html { 
box-sizing: border-box; 
} 
*, ::before, ::after { 
box-sizing: inherit; 
} 
body { 
font: normal 100.01% Helvetica, Arial, sans-serif; 
max-width: 60em; 
margin: 10px auto; 
} 
main { 
margin: 1em 0 1em 0; 
background-color: blue; 

box-shadow: -10px -5px 28px -3px #999999; 
} 


article { 

border: 1px solid #7F0B00; 

background-color: #ADB4B8; 


    } 

.sidebox { 

border: 1px solid black; 
width: 12em; 
} 

.texte { 
background-color: white; 
}  


footer { 

font-size: 10pt; 

border: 1px solid #7F0B00; 
background-color: #ADB4B8; 
box-shadow: -10px -5px 28px -3px #999999; 
    } 

footer a { 
display: inline-block; 
text-decoration: none; 
background-color: #ADB4B8; 
border: 1px dotted #7F0B00; 
color: black; 
padding: .2em; 
margin: .2em; 
-webkit-transition: background-color .25s ease-in; 
transition: background-color .25s ease-in; 
} 

footer a:focus, 
footer a:hover, 
footer span { 
color: #7F0B00; 
background-color: white; 
-webkit-transition: background-color 0.01s; 
transition: background-color 0.01s; 
} 

Answer 1

不知道如果真的是你想要的結果，但添加在你的CSS這些線可以幫助：

article{ 
    display: inline-block; 
    width: 80%;; 
} 
.sidebox{ 
    display:inline-block; 
    width:19%; 
    vertical-align:top; 
} 

Answer 2

我有點不清楚你想要什麼，關於旁邊是否應該顯示在你的佈局流程中，或者如果你想要它佔據整個列，所以我爲這兩個組合提供了一個解決方案。

解決方案＃1

有噸這樣做的方法。你可以移動箱子在你的文章之前聲明，然後把它放在一邊。

.sidebox { 
border: 1px solid black; 
width: 12em; 
float:right; 
background:#fff; 
} 

http://codepen.io/anon/pen/mJdJVx

解決方案＃2

或者你可以利用你的文章和.sidebox元素表單元格。

article { 
border: 1px solid #7F0B00; 
background-color: #ADB4B8; 
display:table-cell; 
} 
.sidebox { 
border: 1px solid black; 
width: 12em; 
background:#fff; 
display:table-cell; 
} 

http://codepen.io/anon/pen/xGxGVR