Я использовал различные методы, чтобы попытаться решить эту проблему, которая у меня есть.Я создаю другой учебный веб-сайт (то есть без намерения публиковать) по вопросам самопомощиЯ пытаюсь разместить боковую панель с цитатами из людей на протяжении всей истории.Но мой элемент aside (боковая панель) не будет отображаться рядом с основным содержимым.
Я попытался поместить основное содержимое в тег 'main' с элементом «aside» снаружи (т.е. отдельные контейнеры), но даже это не работает.Я пытался использовать float: right и другие методы, но просто не могу заставить это работать.
Любая помощь будет оценена.Спасибо ...
body {
width: 800px;
height: auto;
margin-right: auto;
margin-left: auto;
text-align: center;
font-family: garamond, serif;
}
#navbar {
position: fixed;
right: 0;
left: 0;
}
.links {
margin: 8px;
padding: 16px;
background-color: orange;
-webkit-border-radius: 75%;
text-decoration: none;
color: black;
font-weight: 900;
transition: opacity 0.5s linear;
}
.links:hover {
opacity: 0.30;
width:
}
header {
font-size: 25px;
padding-top: 30px;
color: orange;
text-shadow: 8px 8px 16px grey;
}
#section1 {
padding-top: 8px;
}
#section2 {
padding-top: 16px;
padding-bottom: 16px;
}
section p {
text-align: justify;
}
#asideh2 {
text-align: center;
}
aside {
font-size: 12px;
width: 15%;
text-align: justify;
float: right;
}
footer {
display: flex;
justify-content: space-between;
background-color: #d3d3d3;
font-size: 12px;
padding: 8px;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Self-Help Emporium</title>
</head>
<body>
<nav id="navbar">
<a class="links" id="link1" href="#">Home</a>
<a class="links" id="link2" href="#">About</a>
<a class="links" id="link3" href="#">Blog</a>
<a class="links" id="link4" href="#">Contact</a>
<a class="links" id="link5" href="#">Disclaimer</a>
</nav>
<header>
<h1>Self-Help Emporium</h1>
<h2>Your Trusted Source for Self-help Material</h2>
</header>
<article>
<section id="section1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, elit ut vestibulum maximus, orci felis pulvinar velit, malesuada faucibus est lacus et arcu. Cras commodo est nec venenatis blandit. Nullam pretium feugiat ultricies. Proin accumsan, mi et convallis ullamcorper, turpis leo pretium justo, non tincidunt mi est vitae purus. Aenean ultrices scelerisque lacus, eget sagittis justo consectetur ac. Vestibulum interdum consectetur nibh ut lacinia. Aliquam ac fringilla lacus, ut scelerisque purus. Nulla faucibus fringilla varius. Quisque enim ante, placerat eget semper vitae, pulvinar bibendum mi. Maecenas pulvinar tempus tellus, ut consectetur purus feugiat vel. Nulla eget viverra urna. Nulla eu ex eu nisi accumsan scelerisque. Nullam et nulla bibendum, condimentum odio eget, aliquet sem. Nunc ornare volutpat urna ut feugiat.</p>
<p>Maecenas scelerisque leo ipsum, id molestie dui auctor ac. Nunc feugiat laoreet tortor et convallis. Duis quis nisl et libero consectetur bibendum tempor at lectus. Praesent tristique, mi semper pharetra fermentum, metus orci porta ipsum, sit amet accumsan dolor tellus sit amet magna. Nam iaculis odio vel gravida egestas. Vestibulum venenatis est non orci pharetra ultricies. Fusce urna leo, commodo a ex vel, cursus semper sem. Etiam rutrum at est ut volutpat. Etiam vitae ullamcorper lectus. Duis tempus maximus nisi, eu aliquet felis congue ut. Donec erat arcu, malesuada eu ligula quis, consectetur suscipit mauris. Mauris commodo tortor ac elit euismod facilisis.</p>
<p>Vestibulum porttitor pulvinar erat finibus molestie. In at felis eu augue feugiat ullamcorper in ut sapien. Pellentesque gravida eros non sapien convallis ullamcorper. Vivamus magna odio, tristique sed sapien aliquet, dictum aliquet augue. Nunc lorem quam, rutrum quis nulla euismod, ornare aliquet urna. Nullam lobortis malesuada nisl, vitae mattis purus pharetra nec. Duis enim est, malesuada quis odio ac, rutrum luctus nisl. Morbi tortor risus, posuere quis orci ut, pulvinar luctus lectus. Mauris auctor risus ut dapibus mattis. Suspendisse euismod felis mauris, sit amet rhoncus lacus posuere et. In scelerisque lacus vel arcu pellentesque facilisis. Aliquam nisl tortor, cursus ac tincidunt luctus, malesuada quis lectus.</p>
</section>
<section id="section2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, elit ut vestibulum maximus, orci felis pulvinar velit, malesuada faucibus est lacus et arcu. Cras commodo est nec venenatis blandit. Nullam pretium feugiat ultricies. Proin accumsan, mi et convallis ullamcorper, turpis leo pretium justo, non tincidunt mi est vitae purus. Aenean ultrices scelerisque lacus, eget sagittis justo consectetur ac. Vestibulum interdum consectetur nibh ut lacinia. Aliquam ac fringilla lacus, ut scelerisque purus. Nulla faucibus fringilla varius. Quisque enim ante, placerat eget semper vitae, pulvinar bibendum mi. Maecenas pulvinar tempus tellus, ut consectetur purus feugiat vel. Nulla eget viverra urna. Nulla eu ex eu nisi accumsan scelerisque. Nullam et nulla bibendum, condimentum odio eget, aliquet sem. Nunc ornare volutpat urna ut feugiat.</p>
<p>Maecenas scelerisque leo ipsum, id molestie dui auctor ac. Nunc feugiat laoreet tortor et convallis. Duis quis nisl et libero consectetur bibendum tempor at lectus. Praesent tristique, mi semper pharetra fermentum, metus orci porta ipsum, sit amet accumsan dolor tellus sit amet magna. Nam iaculis odio vel gravida egestas. Vestibulum venenatis est non orci pharetra ultricies. Fusce urna leo, commodo a ex vel, cursus semper sem. Etiam rutrum at est ut volutpat. Etiam vitae ullamcorper lectus. Duis tempus maximus nisi, eu aliquet felis congue ut. Donec erat arcu, malesuada eu ligula quis, consectetur suscipit mauris. Mauris commodo tortor ac elit euismod facilisis.</p>
<p>Vestibulum porttitor pulvinar erat finibus molestie. In at felis eu augue feugiat ullamcorper in ut sapien. Pellentesque gravida eros non sapien convallis ullamcorper. Vivamus magna odio, tristique sed sapien aliquet, dictum aliquet augue. Nunc lorem quam, rutrum quis nulla euismod, ornare aliquet urna. Nullam lobortis malesuada nisl, vitae mattis purus pharetra nec. Duis enim est, malesuada quis odio ac, rutrum luctus nisl. Morbi tortor risus, posuere quis orci ut, pulvinar luctus lectus. Mauris auctor risus ut dapibus mattis. Suspendisse euismod felis mauris, sit amet rhoncus lacus posuere et. In scelerisque lacus vel arcu pellentesque facilisis. Aliquam nisl tortor, cursus ac tincidunt luctus, malesuada quis lectus.</p>
</section>
</article>
<form>
</form>
</main>
<footer>
<span>Mathew J. M. | 2018 ™</span>
<span>Last updated: 11/09/2018</span>
</footer>
<aside>
<h2 id="asideh2">Self-Help Quotes:</h2>
<p>No matter where you are in life, you’ll save a lot of time by not worrying too much about what other people think about you. The earlier in your life that you can learn that, the easier the rest of it will be.</p>
<p>Our only limitations in life are those we set up in our own minds.</p>
<p>Focus on what you can control: your actions. How you react to negative feelings will be the key to your success.</p>
<p>Don’t Take Anything Personally. Nothing others do is because of you. What others say and do is a projection of their own reality, their own dream. When you are immune to the opinions of others, you won’t be the victim of needless suffering.</p>
</aside>
</body>
</html>
Обратите внимание, что мой общий веб-сайт размещен в контейнере шириной 800px (т.е. как веб-сайт BBC News).Я попытался уменьшить отступ до 50 пикселей в ширину и основного контейнера до 750 пикселей в ширину (всего 800 пикселей в ширину), но это также не помещает оба контейнера рядом.
Обновление: 13 сентября
Я добавил 'display: flex' в тело документа, как было предложено, и столбец aside, безусловно, сдвинулся вверх, но он исказил весь документ.Заголовок теперь находится слева, а не сверху, где он должен быть.Нижний колонтитул также изменился и стал вертикальным и теперь искажает текст.
Может ли кто-нибудь помочь мне разместить элементы верхнего и нижнего колонтитула там, где они должны быть?Нижний колонтитул должен быть в самом низу.Заголовок должен быть ниже панели навигации в самом верху (т.е. не там, где он сейчас).Благодарю.
