兩個行內塊元素之間的圖像

我正在設計一個網站，使用HTML從零開始編寫HTML &。但是現在我在特定部分遇到問題。接下來的圖像描述了我所需要的：而這就是我其實有：我#article-who有display: inline-block（我可以在兩節之後它拆分）。但問題是關於#square-logo。如果我使用inline-block div不在同一行中堆疊。我可以將這個元素移動到我的文章中，但右圖像會發生什麼？兩個行內塊元素之間的圖像

請給我一些想法，使用div's固定的高度和寬度。在此先感謝！

編輯：Here是我當前的HTML & CSS（在小提琴中生成的預覽全屏不同）。

來源

2016-11-15 JCarlos

你能發佈完整的html/css代碼嗎？ – AVI

@JokerFan我編輯了我的問題。謝謝。 – JCarlos

這樣的事情？

.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>

我做了一個快速解決最後一個元素，即通過.five負應用margin-top。

來源

2016-11-15 04:42:32

簡單，很好的答案。 – AVI

因爲我在頁面的第一部分使用了'''inline-block'''元素，所以我認爲我不能使用''''''''''''''屬性。但它在其容器內運作良好。謝謝！ http://i.imgur.com/A3vyDSn.jpg – JCarlos

使用span標籤而不是div標籤...因爲div標籤似乎在最後附加了一個換行符......但span標籤沒有。嘗試在div標籤內使用多個span標籤，使其成爲一個整體單塊 <div> <span> </span> <span> </span> </div>

來源

2016-11-15 04:37:08

兩個行內塊元素之間的圖像

回答

相關問題