이미지를 영향을주지 않고 두 개의 다른 블록간에 어떻게 정렬 할 수 있습니까?

Question

나는 내 블로그와 삽화를 호스팅 할 웹 사이트를 만들고있다. 내 머리글과 내 화면의 왼쪽 사이에 Twitter 아이콘을 넣으려고합니다. Click here to see the top of the page that I'm referencing.

다음은 각 부분에 대한 다음 코드입니다.

Answer 1

아마도 이것은 최선의 방법은 아니지만 flexbox를 사용하여 해킹 할 수 있습니다. 공간이 원하는 방식으로 배포되도록하려면 빈 스팬 요소가 필요합니다. 이처럼 :

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의이 간격에 대한 유일한 장소 키퍼가 말했듯이 ... 컨테이너 사업부 에서