1

このレイアウトを機能させる方法を何日も探していました。少し助けが必要です

画像を、行ごとに最も高い画像のベースラインと、その行の下のキャプションに揃えたいだけです。画像と jquery を使用してレイアウトを構築する経験が豊富なようです。正しい方向に向けていただければ、解決できると思います。

ここに私が得たもののjsfiddleがありますが、私のクライアントは単に素敵なベースラインを望んでいるので、石積みを捨てなければならないかもしれないと思います..しかし、もちろんレスポンシブラップで.. http://jsfiddle.net/perrodeagua/SeXDu/embedded /結果/

ここに私の現在のCSSがありますが、私はそれと結婚していません

.thePics {
padding:5px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 24px;
float: left;
 width:200px;
 height:auto;
 border:1px;
 text-align:left;


}

#PICS {
 width:auto;
}

そして、ここに私が必要とするもののモックアップがあります http://postimg.org/image/sygkducs5/

ありがとう！

4

3 に答える 3

1

キャプションもすべて不均一な長さである場合は、Flexbox が最良の純粋な CSS オプションです。

http://codepen.io/cimmanon/pen/vJeDk

<div class="gallery">
  <figure>
    <img src="http://placehold.it/100x200" />
    <figcaption>My caption here, this one is a really long one. Oh boy, so long.</figcaption>
  </figure>

  <figure>
    <img src="http://placehold.it/100x150" />
    <figcaption>My caption here</figcaption>
  </figure>
</div>

CSS:

.gallery {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: baseline;
  -webkit-align-items: baseline;
  align-items: baseline;
  -webkit-box-align: baseline;
  -moz-box-align: baseline;
}

.gallery figure {
  /* optional */
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
}

/* optional */
.gallery {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

要素をラップする必要がある場合、ブラウザのサポートは Opera、Chrome、および IE10 に限定されます。 http://caniuse.com/flexbox

于 2013-06-04T20:26:57.967 に答える
-2

編集 - HTML5を使用できる場合、Le Benの回答は私の回答よりもクールですが、IE 8をサポートする必要がある場合、これは機能するはずです

画像が次のように整列している場合:

---- ---- ----
|  | |  | |  |
---- |  | ----
     ----

そして、あなたはそれらを次のようにしたい：

     ----
---- |  | ----
|  | |  | |  |
---- ---- ----

いくつかのCSSを使用してください：

<style type="text/css">
    .captioned-img { display: inline-block; vertical-align: bottom; }
    .caption       { text-align: center; }
</style>

<div class="captioned-img">
    <img />
    <p class="caption">Fig 1</p>
</div>
<div class="captioned-img">
    <img />
    <p class="caption">Fig 2</p>
</div>
<div class="captioned-img">
    <img />
    <p class="caption">Fig 3</p>
</div>

http://jsfiddle.net/YTaVr/

于 2013-06-04T20:17:05.903 に答える