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

CSS - 放置html元素框

2 个答案: