2つのインラインブロック要素の間のイメージ

Question

私はHTML & CSSを使って最初からウェブサイトを設計しています。しかし今、私は特定のセクションに問題があります。 をそして、これは私が実際に持っているものです：：次の画像は、私が必要なものについて説明し マイ#article-whoありdisplay: inline-block（私は後の2つのセクションでそれを分割することができます）。しかし、問題は#square-logoです。 inline-blockを使用すると、divは同じ行にスタックしません。私はこの要素を自分の記事に移すことができますが、右のイメージはどうなりますか？

div's固定高さと幅を使って考えてください。 ありがとうございます！

編集：Hereは私の現在のHTML & CSSです（フィドルで生成されたプレビューは全画面で異なります）。

Answer 1

これはなんですか？

.container { 
 
    width: 320px; 
 
    background-color: yellow; 
 
    overflow: auto; 
 
} 
 
.one { 
 
    background-color: cyan; 
 
    width: 120px; 
 
    height: 150px; 
 
} 
 
.two { 
 
    background-color: indigo; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 
.three { 
 
    background-color: cornflowerblue; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.four { 
 
    background-color: indianred; 
 
    width: 150px; 
 
    height: 150px; 
 
} 
 
.five { 
 
    width: 170px; 
 
    height: 100px; 
 
    background-color: firebrick; 
 
    margin-top: -100px; 
 
} 
 
.align { 
 
    float: left; 
 
}

<div class="container"> 
 
    <div class="one align"></div> 
 
    <div class="two align"></div> 
 
    <div class="three align"></div> 
 
    <div class="four align"></div> 
 
    <div class="five align"></div> 
 
</div>

私は否定的でmargin-topを適用することにより、.fiveすなわち最後の要素への迅速な修正をしました。

Answer 2

divタグの代わりにspanタグを使用します。divタグは末尾に改行が追加されているようですが、スパンタグはそうではありません。 divタグ内に複数のスパンタグを使用して、1つのブロック全体にしてみてください。 <div> <span> </span> <span> </span> </div>