Question

我基本上想要使用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垂直和水平放置到位。

Answer 1

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

有一个版本有Jquery，另一个版本只有CSS（'vanilla version'）

以下是您之前的小提琴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 Markup

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

Jquery Masonry

Vanilla Masonry

希望它有所帮助！

Answer 2

我同意@Luis的说法，Masonry可能是一个更好的选择，但如果你可以修改盒子的宽度和大小，你可以用直接的CSS完成这个。如果你总是先拥有一个大盒子，那么几个小盒子，只需要float:left就可以了所有div，你就可以了。如图所示：

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

Answer 3

嗯应该<{3}}，但CSS flexible boxes（仅限IE10 +），尽管Chrome和Firefox对该模型有很好的支持。

使用browser support is not great，我设法创建了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>

网格样式布局

3 个答案: