Question

这是我的HTML标记：

<div class="awards-wrap">
    <div class="award">
        <img src="http://placehold.it/200x200">
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor</p>
        <p>Lorem ipsum 2013</p>
    </div>
    <div class="award">
        <img src="http://placehold.it/200x200">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="award">
        <img src="http://placehold.it/200x200">
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor</p>
        <p>Lorem ipsum 2013</p>
    </div>
</div>

这是我的css：

.awards-wrap {
    background: gray;
    margin: 0 auto;
    text-align: center;
}

.award {
    max-width: 250px;
    display: inline-block;
}

所以他们现在都在中心对齐并且也有响应，但我希望所有图像都在顶部对齐。

我试过这样做：

.awards-wrap {
    background: gray;
    margin: 0 auto;
    text-align: center;
    display: table;
}

.award {
    max-width: 250px;
    display: table-cell;
}

但它消除了响应能力并在中心上保持一致。我知道我可以使用媒体查询以及所有内容，但我想这样做就像它在inline-block上的行为一样。

以下是jsfiddle

Answer 1

您可以使用vertical-align属性并将其设置为top。它会将div对齐到顶部和中心。这是更新的CSS：

.award {
 max-width: 250px;
 display: inline-block;
 vertical-align:top;
}

这是更新后的JSFiddle

的link

Answer 2

您可以使用display: flex。只需将此规则添加到您的包装器中：

display: flex;
align-items: flex-start;

尝试以下方法：

.awards-wrap {
  background: gray;
  margin: 0 auto;
  text-align: center;
  display: flex;
  align-items: flex-start;
}

.award {
  max-width: 250px;
  display: inline-block;
}

<div class="awards-wrap">
  <div class="award">
    <img src="http://placehold.it/200x200">
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum 2013</p>
  </div>
  <div class="award">
    <img src="http://placehold.it/200x200">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="award">
    <img src="http://placehold.it/200x200">
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum 2013</p>
  </div>
</div>

Answer 3

为什么要使用display: inline-block？以下是否有帮助？

* {
  box-sizing: border-box;
}
.awards-wrap {
  /* other styles */
  height: auto;
  overflow: hidden;
}

.award {
  /* other styles */
  float: left;
  height: auto;
  overflow: hidden;
  margin-right: 5px;
}

JSFiddle

Answer 4

使用风格

books

Answer 5

您可以在这里找到flexbox的解决方案：

＆＃13;

.awards-wrap {
  background:gray;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  text-align:center;
}
.award {
  max-width:250px;
  margin-right:10px;
}

＆＃13;

<div class="awards-wrap">
  <div class="award">
    <img src="http://placehold.it/200x200">
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum 2013</p>
  </div>
  <div class="award">
    <img src="http://placehold.it/200x200">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="award">
    <img src="http://placehold.it/200x200">
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum 2013</p>
  </div>
</div>

＆＃13;

<强>说明：使用此解决方案，所有图像都位于框的顶部。但是使用display:flex;，您还可以在框之间设置空格。使用flex-wrap:wrap;解决方案也可以响应！

我将CSS清理成一个最小的解决方案。

Answer 6

这就是我修改代码的方式，现在所有图像都位于顶部。

HTML代码

<div class="awards-wrap">
    <div id="award">
        <img src="http://placehold.it/200x200">
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor</p>
        <p>Lorem ipsum 2013</p>
    </div>
    <div id="award2">
        <img src="http://placehold.it/200x200">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div id="award3">
        <img src="http://placehold.it/200x200">
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor</p>
        <p>Lorem ipsum 2013</p>
    </div>
</div>

CSS文件

.awards-wrap 
{
    background: gray;
    margin: 0 auto;
    text-align: center;
}

#award 
{
    max-width: 250px;
    display: inline-block;
    position: relative;
    bottom: 34px;
}

#award2 
{
    max-width: 250px;
    display: inline-block;
    position: relative;
    bottom: 102px;
}

#award3 
{
    max-width: 250px;
    display: inline-block;
}

将div与顶部的不同高度对齐

6 个答案: