1

Foundation 4.0 フレームワークを使用しており、作成しようとしているブロック グリッドがあります。それぞれliに固定幅の画像が含まれていますが、高さはすべての画像で同じではありません。画像とテキストを div の下部に揃える必要があります。以下は私のhtmlです。親divを相対位置と絶対位置に変更しようとしましたが、何も機能しません。どんな助けでも大歓迎です。

CSS:

li {
    display:inline-block;
    vertical-align: bottom;
    text-align: center;
}
img {
  max-width: 127px;
  height: auto;
  margin-bottom: 0.7em;
}

// All other styles are defined by the ul.large-block-grid-4 within Foundation.

HTML:

<div class="card-shadow-wrapper">
  <ul class="small-block-grid-2 large-block-grid-4">
    <li>
      <a href="http://example.com">
        <img class="cover" src="image1.png">
        <p>Book 1 Title</p>
        <p>Some Cool Author</p>
      </a>
    </li>
    <li>
      <a href="http://example.com">
        <img class="cover" src="image2.png">
        <p>Book 2 Title</p>
        <p>Some Cool Author</p>
      </a>
    </li>
    <li>
      <a href="http://example.com">
        <img class="cover" src="image3.png">
        <p>Book 3 Title</p>
        <p>Some Cool Author</p>
      </a>
    </li>
    <li>
      <a href="http://example.com">
        <img class="cover" src="image4.png">
        <p>Book 4 Title</p>
        <p>Some Cool Author</p>
      </a>
    </li>
  </ul>
</div>  
4

1 に答える 1

1

cssに追加float:noneすることでこれを修正しました。liこれですべてが整列しましたが、ブラウザーのサイズを縮小すると、画像が重なり合っていました。div次に の中に を追加したところ、<li>正しく折りたたまれたように見えました。

修正された CSS:

li {
  display:inline-block;
  vertical-align: bottom;
  text-align: center;
}

修正された HTML:

<li>
  <div>
    <a href="http://example.com">
      <img class="cover" src="image4.png">
      <p>Book 4 Title</p>
      <p>Some Cool Author</p>
    </a>
  </div>
</li>
于 2013-08-06T02:58:02.977 に答える