两个行内块元素之间的图像

我正在设计一个网站，使用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

两个行内块元素之间的图像

回答

相关问题