插入的 HTML 元素的正确定位

Question

我需要关于如何正确放置插入元素的提示： 最初的情况是目标页面在方形瓷砖网格中列出项目，其中瓷砖随着视口宽度的变化而重新排列。 我需要将网格布局转换为类似平铺布局的东西，为每个项目的更多细节（每行一个项目）提供更多空间，其中原始平铺左对齐，我的矩形元素填充视口的剩余空间。

磁贴被 DIV 包裹在封闭的 DIV 内。现在我创建一个新的 SPAN 并将其插入到内部 DIV 之后。但是，SPAN 不是放置在内部 DIV 的旁边而是下方，并且它的宽度似乎固定为未知值。我通过添加 position: relative to external DIV 和 position: absolute 到内部 SPAN 并将其设置为固定宽度来解决它。它最终会起作用，但是当我注意到外部 DIV 如果我的 SPAN 过度生长它的区域（它溢出）时，它不会扩展 - 即。我的 SPAN 似乎被排除在外部 DIV 之外，尽管它在内部是分层的。

问题是如何有机地插入 SPAN 以便它被祖先采用，然后随着我的元素增长而增长/缩小，并继承它的样式。

<div style="position: relative;">
  <div style="width:200px;">
    ..the original tile
  </div>
  <span style="position: absolute; left: 210px; top: 0px; margin-right: 10px; width: 500px;">
    ...here comes my content
  </span>
</div>

Answer 1

试试上面的代码..请为此添加浮动概念..

<div style="width: 500px; height: 150px; background-color: black;"> 
  <div style="width: 150px; height: 150px; background-color: blue; float: left;"></div> 
  <div style="width: 350px; height: 150px; background-color: red; float: right;"></div> 
</div>