2

私のホームページは、完全な長方形を作成するために配置された一連の小さな画像 (ナビゲーションに使用) です。

私の計画は当初、 and をクリエイティブに使用<ul>することでしたが、それが最善の選択肢であるかどうかはわかりません。floatmargin

この効果を得る最も簡単な方法は何ですか?

<div class="home-nav">
   <ul>
      <li><a href="#">blog</a></li>
      <li><a href="#">contact</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">weddings</a></li>
      <li><a href="#">portraits</a></li>
      <li><a href="#">contact</a></li>
   </ul>
</div><!-- end home-nav -->

画像モザイク

4

2 に答える 2

1

MasonryやIsotopeなどの JavaScript プラグイン、またはシンプルでありながら効果的なWookmark jQuery Plugin (私の個人的なお気に入り)を使用できます。ただし、このような単純なレイアウトの場合、オーバーヘッドの価値がない場合があります。

を使用して正しい軌道に乗っていると思いますfloat:left。ただし、JavaScript を使用せずに目的の効果を得るには、左上の 2 つのボックスをグループ化する必要があります。

また、これは実際にはlistではないため、 andの代わりにHTML5<nav>タグを使用します。ここをクリックして、以下のコードの実際の例を確認してください)。<ul><li>

HTML

<nav>
  <div>
    <a href="#"></a>
    <a href="#"></a>
  </div>
  <div>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
  </div>
</nav>

CSS

nav {
  width: 315px;
}
nav a {
  float: left;
  background-color: gray;
}
nav div:nth-child(1) {
  float: left;
  width: 100px;
}
nav div:nth-child(1) a:nth-child(1) {
  width: 100px;
  height: 50px;
  margin: 0 5px 5px 0;
}
nav div:nth-child(1) a:nth-child(2) {
  width: 100px;
  height: 50px;
  margin: 0 5px 0 0;
}
nav div:nth-child(2) a:nth-child(1) {
  width: 50px;
  height: 105px;
  margin: 0 5px 0 5px;
}
nav div:nth-child(2) a:nth-child(2) {
  width: 155px;
  height: 105px;
}
nav div:nth-child(2) a:nth-child(3) {
  width: 155px;
  height: 105px;
  margin: 5px 5px 0 0;
}
nav div:nth-child(2) a:nth-child(4) {
  width: 155px;
  height: 105px;
  margin: 5px 0 0 0;
}

私はより複雑な CSS を犠牲にして、最小限の HTML マークアップを好む傾向があり:nth-childます。

于 2013-07-16T03:19:57.240 に答える
0

このタイプの配置は、ビン パッキング アルゴリズムを使用して自動的に行われます。これを行う JavaScript ライブラリがいくつかありますが、最も人気のあるライブラリはIsotopeです。

于 2013-07-16T03:19:19.170 に答える