2

我的主页是一系列小图像（用于导航），排列成一个完美的矩形。

我的计划最初是使用<ul>和一些创造性的使用，float但margin我不再确定这是最好的选择。

我可以达到这种效果的最简单方法是什么？

<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 插件（我个人最喜欢的）。然而，对于这样一个简单的布局，它可能不值得开销。

我认为您在使用float:left. 但是，您需要将左上角的两个框分组，以便在不使用 JavaScript 的情况下获得所需的效果。

另外，由于这不是一个真正的list，我会使用 HTML5<nav>标签而不是<ul>and <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 回答