Question

我有一个相当不寻常的布局，我正在努力实现。为了论证起见，有一个div需要从包装器的左侧和顶部固定为200px。

然后我有一组方形图像，这些图像将全部浮动并继续到浏览器窗口的边缘，并环绕绝对定位的div。我知道绝对定位会从文档流程中取出div，这意味着我无法想到一个简单的解决方案。

有没有人解决过这种问题？可能与javascript？

编辑：这是粗略的布局：link

Answer 1

编辑：从你的形象来看，我会亲自使用一张桌子。但是，它可以用浮动来实现：

（图片：http://i.stack.imgur.com/KAqxZ.png）

<style>
#cont {
  width: 100px;
}   
.small {
  float:left;
  height:25px;
  width:25px;
  background-color:#00F;
}   
.big {
  float:left;
  height:50px;
  width:50px;
  background-color:#F00;
}   
.long {
  float:left;
  height:50px;
  width:25px;
  background-color:#F0F;
}   
.long .small {
  background-color:#F0F;
}   
</style>

<div id="cont">
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="long">
    <div class="small"></div>
    <div class="small"></div>
  </div>
  <div class="big"></div>
  <div class="small"></div>
  <div class="small"></div>
</div>

原文：

我会做这样的事情：

<div class="absolute-wrapper">
  <div><!-- whatever content you intended for the absolute div... --></div>
  <div class="float-left">...</div>
  <div class="float-left">...</div>
  ...
</div>

但是，我倾向于建议您搜索另一种解决方案，而不是绝对定位的元素。他们很容易变得难以维持。

Answer 2

我猜你想要更多的灵活性，但万一，如果你的设计得到合理修复，你可以只使用3列（容器div）并按列分类。

如果您的HTML已修复，您可以使用javascript，但我不知道任何现成的解决方案。

我可能会使用javascript做一些数学运算并在黑盒子后面的正确位置注入虚拟图像/元素（保持黑盒子绝对定位）。你也可以做那个服务器端。

Answer 3

您可以使用canvas元素执行此操作，但它有缺点。你将依赖于javascript，因为你需要在javascript中进行所有定位。

不是没有帮助，但我也认为你应该考虑这个确切设计的重要性，因为我认为没有任何直接的解决方案，因为今天的HTML并不是真的为这些类型的布局。未来很有希望，给我们提供多列和弹性框等内容......

Answer 4

使用javascript / jQuery，可以使用以下伪代码的逻辑来完成：

创建一个预先形成这些步骤的函数....

步骤1：从dom中删除任何具有名为fakeSquare的类的div。像

这样的东西

 $('.fakeSquare').remove();

步骤2：计算一行中红色div的数量。将此号码存储在squaresPreRow中。类似于：var squaresPreRow = floor( window width / square width )。

步骤3：在squaresPreRow + 1红色方格div之后，添加两个空div。像这样......

$("div.redSquare")
    .index(squaresPreRow + 1)
    .append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>");

步骤4：为第三行添加另外两个方格......

$("div.redSquare")
    .index((squaresPreRow * 2) + 1)
    .append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>");

第5步：再次......

$("div.redSquare")
    .index((squaresPreRow * 3) + 1)
    .append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>");

最后，您希望在DOM准备就绪和窗口更改时调用此函数。

这可能需要一些调整，但希望它可以让你开始。

绝对定位和浮动

4 个答案: