3

高さが不明な画像を含むレスポンシブレイアウトで、画像を垂直に配置した下 (下の図を参照) をレイアウトしようとしています。

画像は列の幅に合わせてスケーリングされますが、高さはさまざまであり、事前にそれが何であるかを知ることはできません.

ここに画像の説明を入力

残念ながら、現時点で私が得ることができた最も近いものはこれです

ここに画像の説明を入力

メディアクエリを使用すると、画面の幅に応じて列の数が変化し、JavaScriptがより複雑になるため、可能であればJavaScriptの使用を避けたいと思います。

現在使用しているCSSは

#catalogue-items {
  @include clearfix;
  margin: 40px 0;

  .catalogue-item {
    width: 20%;
    float: left;
    margin-left: 4%;
    @include box-sizing(border-box);
    margin-bottom: 20px;

    img {
      width: 100%;
    }

    p {
      font-family: sans-serif;
      font-size: 0.8em;
      padding: 0.5em;
    }

    &:nth-child(4n + 1) {
      clear:left;
    }
  }
}

メディア クエリを使用して nth-child セレクターを変更します。

これを行う方法はありますか？

4

1 に答える 1

2

私はそれを使用してそれを解決しますdisplay: inline-block

HTML:

<ul>
    <li>
        <img width="50" height="100" src="/img/logo.png"/><br/>
        Description
    <li>
    <li>
        <img width="50" height="125" src="/img/logo.png"/><br/>
        Description
    <li>
    <li>
        <img width="50" height="75" src="/img/logo.png"/><br/>
        Description
    <li>
<ul>

CSS:

ul {
    margin-left: -10px;
}

li {
    display: inline-block;
    margin: 0 10px 0 10px;
}

img {
    border: 1px solid red;
}

フィドルを見る

于 2012-08-22T14:03:49.357 に答える