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

Question

我正在使用HTML＆amp; amp; CSS从头开始。但是现在我在特定部分遇到了问题。下一张图片描述了我需要的东西： 这就是我实际拥有的： 我的#article-who有display: inline-block（我可以将其分成两部分）。但问题在于#square-logo。如果我使用inline-block，则div不会堆叠在同一行中。我可以将这个元素移到我的文章中，但是右边的图像会发生什么？

请使用固定高度和宽度的div's给我一些想法。 提前谢谢！

修改：Here是我目前的HTML＆amp; CSS（小提琴中生成的预览在全屏幕中有所不同）。

Answer 1

这样的东西？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

通过将.five应用于否定，我快速修复了最后一个元素，即margin-top。

Answer 2

使用span标签而不是div标签...因为div标签似乎在末尾附加换行符但是span标签没有。 尝试在div标签内使用多个span标签，使其成为一个整体的单个块 <div> <span> </span> <span> </span> </div>