0

我必须编写一个 html 查看器，该查看器将一些对象作为输入并提供一个不错的 html 布局。对于布局部分，我决定使用twitter bootstrap 2.3

先决条件

  • 对象表示为不同大小的div
  • 不知道要提前显示多少个div

现在，我想要的是一个“自动调整”布局，能够以最方便的方式替换屏幕中的对象。该概念如下图所示：

在此处输入图像描述

在左侧您可以看到对象，在右侧您可以看到所需的最终位移。我几乎让它以这种方式工作：

<div class="row-fluid">
    <div class="node span6">a box</div>
    <div class="node span6">a second box</div>
    <div class="node span6">a third box</div>
    <!--as much divs as you want-->
</div>

margin-left但在第二行中，由于引导 css的设置，我得到了一个糟糕的“向右倾斜”效果。

在此处输入图像描述

我还尝试覆盖 css 规范span以采用边距右驱动的方法，但没有运气（如果有趣，我可以提供有关此方法的信息）。有什么建议么？

4

1 回答 1

1

您可以通过使用引导程序和:nth-child伪选择器来做到这一点。但是，您尝试完成的这一点还需要您在简单.span的左边距之外进行 CSS 更改...您可能需要使用较小@media的查询重新调整它，这可能超出了向您展示的这个问题的范围但是，如何做到这一点……这应该可以帮助您：

这是一个jsFiddle

上面的小提琴已经加载了引导程序......我正在制作一个容器，.row-fluid其中包含我要添加许多.span6's 的类，但我也确保在第三个然后每隔两个.span6它会删除左边距所以它.span6每行堆叠两个和两个。

您可以在此处阅读有关:nth-child 伪选择器的更多信息

于 2013-08-06T20:29:44.247 回答