CSS - 定位抛开HTML元素框

-1

我'学习HTML5和CSS3现在。我不得不说，我是一个初学者。我的问题：我想在文章旁放置一个旁边的元素文本框。文本框应该出现在右侧。我已经测试了一些东西，但是没有任何东西会导致我的目标请让我知道我该怎么做？那么页脚怎么样？为什么它不在正确的位置（主要边缘被忽略）。CSS - 定位抛开HTML元素框

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

来源

2015-04-21 martin

没有做过以下工作的答案给你的？ – jbwharris

不知道如果真的是你想要的结果，但添加在你的CSS这些线可以帮助：

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

来源

2015-04-21 14:15:30 legui

我有点不清楚你想要什么，关于旁边是否应该显示在你的布局流程中，或者如果你想要它占据整个列，所以我为这两个组合提供了一个解决方案。

解决方案＃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

来源

2015-04-21 16:15:04 jbwharris

CSS - 定位抛开HTML元素框

回答

相关问题