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