Question

让我们检查this fiddle：

img {
    float: left;
}

#inner {
    height: 128px; 
    background-color: yellowgreen; 
    display: table-cell;
    vertical-align: middle;
}

#content {
    background-color: red;
}

<img src="http://cdn.memegenerator.net/instances/250x250/37934290.jpg" width="128" height="128" />
<div id="inner">
    <div id="content">text text tertkl elknr tlken lsl kdmfsldkfmsldkfmslkd mfkndfln dflkfndg lkn</div>
</div>

这个工作到目前为止我认为 - 文本居中，当你缩小宽度时，文字会下划线：但是它与图像“相距太远”。如果vertical-align: middle;在需要跳转时变为vertical-align: top;，那将是最好的。如何在没有jQuery的情况下做到这一点？

Answer 1

实现此目的的一种简单方法是使用CSS Media Query。

您的标记将保持不变，您的CSS只需要添加以下内容：

@media screen and (max-width: 290px) {
    #inner {
        vertical-align: top;   
    }
}

^{在行动中：http://jsfiddle.net/uWMkH/1/}

这就是说，“当视口的宽度不超过290像素时，请将此内容添加到#inner。

请查看这些链接以获取更多信息：

使用媒体查询执行此操作的警告是IE8及更低版本不支持它们。我希望你不必处理那些令人头疼的问题！

点击此处查看支持的浏览器的完整列表：

http://caniuse.com/#feat=css-mediaqueries

Answer 2

你可以在没有媒体查询的情况下执行此操作，但它需要一个支持整个 CSS灵活框模块的浏览器（大多数浏览器都缺少对包装的支持）。目前，支持仅限于Opera，Chrome和IE10。

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

figure {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: yellowgreen;
}
@supports (flex-wrap: wrap) {
  figure {
    display: flex;
  }
}

figcaption {
  -webkit-flex: 1 15em;
  -ms-flex: 1 15em;
  flex: 1 15em;
  background-color: red;
}

Flexbox提供的媒体查询功能是能够根据可用空间重排内容，而不仅仅是浏览器宽度。

文本位于图像旁边，如果没有空格，则与顶部对齐

2 个答案: