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

2

你的意思是，像这样？http://jsfiddle.net/LeBen/yFEc6/

预期结果

实际在 Chrome、Safari 和 Firefox 中进行了测试，默认情况下，图像与基线对齐，使用<figure>.

于 2013-06-04T20:12:55.977 回答
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 回答