1
私は自分のdivを "head" divに入れようとしています。問題は私のイメージと私の "ソーシャル"ヘッダーの間に置くようにしていますが、それだけでオーバーラップしてdivsをプッシュします。私はどのように私はタイトルを作ることができるようにテキストを置くことができるようにそれらの2つの間でそれを中心にすることができますか？入れ子になっている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は何をしますか？私はあなたのソリューションを使用してみましたが、それでも正しく表示されません。私は崇高なテキストエディタを使用しています。フレックスキーワードは、それが重要であれば残りのように色分けされていません。 – buttonSmasher96
白い場合は正常です！フレックス方向は何をするのですか：この場合、私は行を使用して、1行ですべてを欲しいと悲しく思っています：justify-content：space-between; 3との間のスペースは同じなので、タイトルは真ん中にとどまります。フレックスボックスは本当に良いです。私はそれを使って作業したいのです – DanyCode