3

我对此很陌生，因此，这似乎是一个非常简单的问题。

我已经开始设计自己的页面，下面的代码就是我目前所处的位置。

它的外观是...

  • 左上角 - 我的标志
  • 右上角 - 导航
  • 左侧 - 图片/描述

我正在尝试做的，以及我被卡住的地方，是让描述在每个图像下方完美对齐，并且当你在页面上移动时会发生同样的事情。

当前发生的情况是，每张图片和下面的描述都在页面左侧一直对齐到左侧。

当前代码如下：

<body>
  <div class="container">
    <a href="#"><img src="#" alt="Title" width="300" height="100" /></a>
    <div id="navbar">
      <ul>
        <li><a href="#">GALLERY</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
    <div id="images">
      <img src="#" width="300" height="199" alt="name"></div>
      <div id="descriptions">City</div>
      <div id="images">
        <img src="#" width="300" height="199" alt="name"></div>
        <div id="descriptions">Model</div>
      </div>
  </div>
</body>
4

1 回答 1

1

我会使用这样的标记：

<figure class="images">
    <img src="#" width="300" height="199" alt="City">
    <figcaption>City</figcaption>
</figure>

<figure class="images">
    <img src="#" width="300" height="199" alt="Model">
    <figcaption>Model</figcaption>
</figure>

<figure class="images">
    <img src="#" width="300" height="199" alt="Foo">
    <figcaption>Foo</figcaption>
</figure>

还有一些示例 CSS：

.images {
    float: left;
    width: 300px;
    min-height: 200px;
    margin: 0 10px 0 0;
    background-color: #EEE; /* just to show containers since image scr is blank */
}

.images:last-child {
    margin-right: 0;
}

.images figcaption {
    text-align: center;
}

小提琴

于 2012-12-19T03:41:46.093 回答