1
Так что я пытаюсь поместить мой div, «title», в мой «заголовок» div. Проблема в том, что я пытаюсь сосредоточить его между моим изображением и моим «социальным» заголовком, но он просто перекрывается и толкает divs вниз. Как я могу сосредоточить его между этими двумя, чтобы иметь возможность размещать текст, чтобы я мог сделать заголовок?Почему мой вложенный div нажимает на мой контент?
\t body {
\t \t background : #b3d9ff;
\t \t margin : 0;
\t \t padding: 0;
\t \t font-family : Futura;
\t }
\t #wrapper {
\t \t width: 960px;
\t \t height: auto;
\t \t background: #cce5ff;
\t \t border-left: 5px solid #737373;
\t \t border-right: 5px solid #737373;
\t \t overflow : auto;
\t \t margin : 0 auto;
\t \t padding: 10px;
\t }
\t #header {
\t \t width:100%;
\t \t height:100px;
\t \t border-bottom: 3px solid #000;
\t \t clear: right;
\t }
\t #header > img {
\t \t margin: 15px 0px 0px 0px;
\t }
\t #social {
\t \t float: right;
\t \t margin: 20px 30px 0px 0px;
\t }
\t #social ul li {
\t \t float: left;
\t \t list-style: none;
\t \t padding-right: 5px;
\t }
\t #sidebar {
\t \t float: left;
\t \t width: 275px;
\t \t height: 100%;
\t }
\t #menu {
\t \t float: left;
\t \t height: auto;
\t \t width: 200px;
\t }
\t #menu ul li {
\t \t list-style : none;
\t \t padding: 0px;
\t \t text-align: center;
\t }
\t #menu ul li a {
\t \t color: #666666;
\t \t text-decoration: none;
\t \t display: block;
\t }
\t #menu ul li a:visited{
\t \t color:purple;
\t }
\t #menu ul li a:hover {
\t \t color:black;
\t }
\t #content {
\t \t float: left;
\t \t width: 655px;
\t \t height: 100%;
\t \t padding-left: 15px;
\t \t letter-spacing : 1;
\t \t border-left: 3px solid black;
\t }
\t h1 {
\t \t text-align: center;
\t \t padding : 5px;
\t \t border-bottom: 1px solid black;
\t }
\t p {
\t \t text-indent: 50px;
\t \t line-height: 25px;
\t }
\t .top a {
\t \t color : #666666;
\t \t text-decoration: none;
\t }
\t #readMore {
\t \t text-align: right;
\t }
\t #readMore a:visited {
\t \t color:purple;
\t }
\t #footer {
\t \t clear: both;
\t \t width: 100%;
\t \t height: 80px;
\t \t color: black;
\t \t border-top: 3px solid black;
\t }
\t h5 {
\t \t text-align: center;
\t \t color: #666666;
\t }
\t #title {
\t \t position relative
\t }<div id="wrapper">
\t <div id="header">
\t \t <div id="title"><h2>Title centered in header</h2></div>
\t \t <a name="top"></a>
\t \t \t \t <img src="https://janikvonrotz.ch/wp-content/uploads/2015/10/Python-Logo.png" width="232" height="101" alt="Logo" title="python">
\t \t <div id="social">
\t \t \t <ul>
\t \t \t \t <li><a href="https://github.com/GallardoBrayan" target="_blank"><img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Github-icon.png" width="55" height="55"alt="github" title="github"></a></li>
\t \t \t </ul>
\t \t </div> <!-- End of social -->
\t </div> <!-- End of header -->
\t <div id="sidebar">
\t \t <div id="menu">
\t \t \t <ul>
\t \t \t \t <li><h4><a href="index.html">Home</a></h4></li>
\t \t \t \t <li><h4><a href="overview">Overview</a></h4></li>
\t \t \t </ul>
\t \t </div> <!-- End of menu -->
\t </div> <!-- End of sidebar -->
\t <div id="content">
<a name="overview"><h1>Overview</h1>
<pre style="word-wrap: break-word; white-space: pre-wrap;">
Sample
</pre>
<div class="top"><h4><a href="#top">Back To Top</a></h4></div>
\t </div> <!-- End of content -->
\t <div id="footer">
\t \t <h5>2016 © Brayan Rafael Gallardo </br><a href="mailto:?subject=Sample">Contact me</a></h5>
\t </div>
</div> <!-- End of wrapper -->
Что делает flex: direction do? Я попытался использовать ваше решение, но оно все еще отображается неправильно. Я использую возвышенный текстовый редактор, и ключевые слова flex не являются цветными, как остальные, если это имеет значение. – buttonSmasher96
если они белые, это нормально! что делает flex-direction: так что в этом случае я использую ROW, что означает, что я хочу, то все в одной строке, и я грустно: justify-content: space-between; что делает пространство между 3 тем же, что и название, и остается посередине. flexbox действительно хорош, мне нравится работать с ним, он много раз работает быстро и просто – DanyCode