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の方がおそらく良いという@Luisに同意しますが、ボックスの幅とサイズを修正できれば、ストレートCSSでこれを実現できます。float:left常に最初に 1 つの大きなボックスを作成し、次にすべての div にいくつかの小さなボックスを作成する場合は、準備完了です。ここに示されています：

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

于 2013-06-03T21:18:55.857 に答える
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 に答える
0

CSS フレキシブル ボックスでは可能ですが、Chrome と Firefox はこのモデルを適切にサポートしていますが、ブラウザーのサポートは十分ではありません(たとえば IE10+ のみ)。

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 に答える