文本位於圖像旁邊，如果沒有空格，則與頂部對齊

Question

讓我們看看這個小提琴 ：

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/}

這就是說，“當視口的寬度不超過290px時，請將此內容寫入#inner 。

請查看這些鏈接以獲取更多信息：

• http://www.w3.org/TR/css3-mediaqueries/
• http://cssmediaqueries.com/
• http://css-tricks.com/css-media-queries/

使用媒體查詢執行此操作的警告是，IE8及更低版本不支持它們。 我希望你不必處理那些令人頭疼的問題！

在此處查看支持的瀏覽器的完整列表：

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

Answer 2

您可以在沒有媒體查詢的情況下執行此操作，但它需要一個支持整個 CSS Flexible框模塊的瀏覽器（大多數瀏覽器都缺少對包裝的支持）。 目前，支持僅限於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通過媒體查詢提供的功能是能夠根據可用空間重排內容，而不僅僅是瀏覽器寬度。