时间戳

首页 > 解决方案 > 插入的 HTML 元素的正确定位

html - 插入的 HTML 元素的正确定位

问题描述

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

瓷砖是DIV包裹在封闭的DIV内。现在我创建一个新的SPAN并将其插入到内部DIV之后。但是，SPAN不是放在内部 DIV 旁边而是放在内部DIV下方，它的宽度似乎固定为未知值。我通过添加位置来解决它：相对于外部DIV和position: absolute内部SPAN并将其设置为固定宽度。它最终会起作用，但是当我注意到如果我的SPAN过度生长它的区域（它溢出）时，外部DIV不会扩展- 即。我的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>

标签： htmlcss

解决方案

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

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

推荐阅读