0

これが私のサンプル出力です：

ここに画像の説明を入力

ここに私のhtmlコードがあります：

<div class="products">
<ul class="thumbnails">'
    <li>
        <div>'.$item->ASIN.'</div>
        <div><img src="'.$item->SmallImage->URL.'" alt=""></div>
        <div>'.$item->ItemAttributes->Title.'</div>
        <div>'.$item->ItemAttributes->ProductGroup.'</div>
    </li>
</ul>

そして、ここに私のcssコードがあります:

    .thumbnails {
    text-align: center;
}
.thumbnails li {
    width: 150px;
    height: 250px;
    background: red;
    float: none !important; /* to overwrite the default property on the bootstrap stylesheet */
    display: inline-block;
    *display: inline; /* ie7 support */
    zoom: 1;
}

すでに水平に配置されていることに気付きました。私の問題は、垂直に配置することです。私は何をすべきか？助けてくださいありがとう！

4

3 に答える 3

0

これを改善するには、要素の高さを手動で設定する/要素の高さを一定に保つ方法、または次の CSS を使用する方法が 2 つあります。

  .thumbnails > li {
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .thumbnails > li:nth-child(3n+4) {
    clear: both;
  }

これをコンテナにラップしても問題は解決しません。より小さなスペースに制限するだけです。

同様の問題:

ブートストラップcssでサムネイルを垂直に揃えますか?

twitter-bootstrap を使用してサムネイルを列に沿って配置する

TwitterブートストラップのサムネイルがChrome + Windows XP以外の場所で正しく整列しない

于 2013-03-21T09:22:39.340 に答える
0

ロウやコンテナで包みます。

<div class="products">
  <div class="container">
    <ul class="thumbnails">'
      <li>
        <div>'.$item->ASIN.'</div>
        <div><img src="'.$item->SmallImage->URL.'" alt=""></div>
        <div>'.$item->ItemAttributes->Title.'</div>
        <div>'.$item->ItemAttributes->ProductGroup.'</div>
      </li>
    </ul>
  </div>
</div>
于 2013-02-20T17:40:57.767 に答える