イメージを他の2つのブロックに影響を与えずにどのように整列できますか？

Question

私は自分のブログやアートワークをホストするウェブサイトを作っています。私は、Twitterのアイコンを中央のヘッダーと画面の左端の間に配置しようとしています。 Click here to see the top of the page that I'm referencing.

以下は、それぞれの部分のコードです。

Answer 1

これはおそらく最良の方法ではありませんが、フレックスボックスを使用してハックする可能性があります。あなたはスペースがあなたがそれを望むように分散されていることを確認するために空のスパン要素が必要になります。このように：

header { 
 
    background: #eee; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
}

<header> 
 
    <span></span> 
 
    <div id="twitter"> 
 
    <a href="twitter.com/wisopco"><img src="img\twitter.png" alt="Twitter" class="social"></a> 
 
    </div> 
 
    <h2 id="sultown" class="nav"> <a href="index.html"> SULTOWN </a></h1> 
 
    <span></span> 
 
    <span></span> 
 
</header> 
 
<form> 
 
    <div id="search"><input type="text" name="search" placeholder="explore"></div id="search"> 
 
</form> 
 

 
<a href="blogs/spectroscopy.html"><img src="img\spectroscopy.png" alt="Spectroscopy" class="media"></a>

私が言ったように、span sが間隔のための唯一の場所キーパー...