3

我基本上想使用 css 和 html 来定位元素，以便它们占据它们适合的任何空间。所以我有一个网格状的结构，元素堆叠得很好。问题是我无法让小盒子在大盒子旁边填满。例如http://jsfiddle.net/9pk4J/1/

HTML：

<section id="cubes">
  <div>
          <article class="large"></article>
        </div>
  <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
</section>

CSS：

#cubes {
font-size:0;
position: absolute;
    max-width:670px;
}
#cubes div {
display:inline-block;
padding:3px;
}
#cubes div article.large {
cursor:pointer;
display:inline-block;
height:300px;
width:492px;
background-color:rgba(0,0,0,0.5);
overflow:hidden;
}
#cubes div article {
cursor:pointer;
display:inline-block;
height:150px;
width:160px;
background-color:rgba(0,0,0,0.5);
overflow:hidden;
}

我意识到有些方法可以命名特定元素并使用绝对定位将它们放置到位，但理想情况下，我希望仅使用 css 和 html 将它们垂直和水平放置到位。

4

3 回答 3

1

我建议使用插件，Masonry它的名字，你可以检查它的页面。

有一个带有 Jquery 的版本和另一个只有 CSS 的版本（“香草版本”）

这是您以前的小提琴http://jsfiddle.net/9pk4J/5/的现场演示

html 标记

<section id="cubes">
    <div class="box">
        <article class="large"></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
</section>

js 标记

$('#cubes').masonry({
    itemSelector: '.box',
    columnWidth: 100,
    isAnimated: true
});

jQuery砌体

香草砌体

希望能帮助到你！

于 2013-06-03T21:16:13.947 回答
1

我同意@Luis 的观点，Masonry 可能是一个更好的选择，但是如果你可以固定盒子的宽度和大小，你可以使用直接的 CSS 来完成。如果你总是先有 1 个大盒子，然后是几个小盒子，就float:left在你所有的 div 上，你就可以开始了。此处显示：

http://jsfiddle.net/9pk4J/2/

于 2013-06-03T21:18:55.857 回答
0

好吧， CSS 灵活框应该是可能的，但浏览器支持不是很好（仅以 IE10+ 为例），尽管 Chrome 和 Firefox 对该模型有很好的支持。

使用CSS flexbox builder，我设法创建了一个小演示（仅在 Chrome 29 中测试过），展示了如何呈现盒子，但有很多选项可以自定义输出。尽管如此，您可能会发现它们的盒子仍然无法正确流动，但仍然有一些东西可以玩。

抱歉，代码有点混乱，我直接将它从构建器页面中取出！

<div class="visual">
  <div class="box" ng-style="model | vendorPrefix" ng-class="{hover:hoverContainer}" style="-webkit-flex-flow: column wrap; -webkit-justify-content: flex-start; -webkit-align-content: flex-start; -webkit-align-items: flex-start;">
    <div class="ng-scope ng-binding" style="-webkit-order: 1; -webkit-flex: 0 1 auto; -webkit-align-self: auto; min-width: 150px; min-height: 150px;">A</div>
    <div class="ng-scope ng-binding" style="-webkit-order: 2; -webkit-flex: 0 0 50px; -webkit-align-self: auto; min-width: 50px; min-height: 50px;">B</div>
    <div class="ng-scope ng-binding" style="-webkit-order: 2; -webkit-flex: 0 0 50px; -webkit-align-self: auto; min-width: 50px; min-height: 50px;">C</div>
    <div class="ng-scope ng-binding" style="-webkit-order: 2; -webkit-flex: 0 0 50px; -webkit-align-self: baseline; min-width: 50px; min-height: 50px;">D</div>
    <div class="ng-scope ng-binding" style="-webkit-order: 2; -webkit-flex: 0 0 50px; -webkit-align-self: auto; min-width: 50px; min-height: 50px;">E</div>
  </div>
</div>
于 2013-06-03T21:42:31.710 回答