CSS实例教学多方式实现media object

media object指的是图片在左，标题和段落在右。可以有多种的实现方式：

用floats

我们当然可以把image用float安到左边。

Html:

<div class="block">
  <img src="https://api.adorable.io/avatars/285/abott@adorable.io.png" alt="">
  <h2>Sandy Sandwiches</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

.block {
  overflow: hidden;
  background: #333;
  padding: 1rem;
  max-width: 20rem;
  margin: 0 0 1rem 0;
}
.block img {
  width: 75px;
  height: 75px;
  float: left;
  margin: 0 1rem 0 0;
}
.block h2 {
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}


body {
  background: #222;
  color: white;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  font-size: 85%;
  line-height: 1.4;
  margin: 0;
  padding: 1rem;
}

Floating意味着wrapping，wrapping很多时候可用，但是有时候不尽如人意。

上图可以看到，文字在图片下面包围。我们可以设置所有文字被元素包围，确保元素padding-left等于image的width, 然后留有空白。

<div class="block">
  <img src="https://api.adorable.io/avatars/285/abott@adorable.io.png" alt="">
  <div>
    <h2>Sandy Sandwiches</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptate iure nostrum debitis quae nihil, id fugiat consequatur quo, laborum, non eligendi dolore expedita minima voluptates repudiandae</p>
  </div>
</div>

.block {
  overflow: hidden;
  background: #333;
  padding: 1rem;
  max-width: 20rem;
  margin: 0 0 1rem 0;
}
.block img {
  width: 100px;
  height: 100px;
  float: left;
  margin: 0 1rem 0 0;
}
.block h2 {
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}
.block > div {
  padding-left: calc(100px + 1rem);
}


body {
  background: #222;
  color: white;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  font-size: 85%;
  line-height: 1.4;
  margin: 0;
  padding: 1rem;
}

或者你可以float两边：

.block {
  overflow: hidden;
  background: #333;
  padding: 1rem;
  max-width: 20rem;
  margin: 0 0 1rem 0;
}
.block img {
  width: 75px;
  float: left;
}
.block h2 {
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}
.block > div {
  width: calc(100% - 75px - 1rem);
  float: right;
}


body {
  background: #222;
  color: white;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  font-size: 85%;
  line-height: 1.4;
  margin: 0;
  padding: 1rem;
}

用flexbox

用flexbox就简单多了。

.block {
  display: flex;
  align-items: flex-start;
  background: #333;
  padding: 1rem;
  max-width: 20rem;
  margin: 0 0 1rem 0;
}
.block > img {
  width: 75px;
  margin: 0 1rem 0 0;
}
.block > div {
  flex: 1;
}
.block h2 {
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}


body {
  background: #222;
  color: white;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  font-size: 85%;
  line-height: 1.4;
  margin: 0;
  padding: 1rem;
}

注意到我们把img的标签变成flex item,我们用align-items: flex-start;来确保不会涨出和文本一样的高度。

用table布局

media object 可以是 table的two-cell row.

<table class="block">
  <tr>
    <td>
      <img src="https://api.adorable.io/avatars/285/abott@adorable.io.png" alt="">
    </td>
    <td>
      <h2>Sandy Sandwiches</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptate iure nostrum debitis.</p>
    </td>
  </tr>
</table>

.block {
  background: #333;
  padding: 1rem;
  max-width: 20rem;
  margin: 0 0 1rem 0;
}
.block td {
  vertical-align: top;
}
.block img {
  width: 75px;
  margin: 0 1rem 0 0;
}
.block h2 {
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}


body {
  background: #222;
  color: white;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  font-size: 85%;
  line-height: 1.4;
  margin: 0;
  padding: 1rem;
}

如果你不想使用table的标签，完全可以，你只要在css中加入display:tabel就好。

<div class="block">
  <img src="https://api.adorable.io/avatars/285/abott@adorable.io.png" alt="">
  <div>
    <h2>Sandy Sandwiches</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptate iure nostrum debitis quae nihil, id fugiat consequatur quo, laborum, non eligendi dolore expedita minima voluptates repudiandae</p>
  </div>
</div>

.block {
  display: table;
  background: #333;
  padding: 1rem;
  max-width: 20rem;
}
.block > img {
  display: table-cell;
  width: 100%;
}
.block > div {
  display: table-cell;
  vertical-align: top;
  padding-left: 1rem;
}
.block h2 {
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}


body {
  background: #222;
  color: white;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  font-size: 85%;
  line-height: 1.4;
  margin: 0;
  padding: 1rem;
}

用grid布局

用grid布局也很简单。

<div class="block">
  <img src="https://api.adorable.io/avatars/285/abott@adorable.io.png" alt="">
  <div>
    <h2>Sandy Sandwiches</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptate iure nostrum debitis quae nihil, id fugiat consequatur quo, laborum, non eligendi dolore expedita minima voluptates repudiandae</p>
  </div>
</div>

.block {
  display: grid;
  grid-template-columns: 100px auto;
  grid-template-rows: auto;
  grid-column-gap: 1rem;
  background: #333;
  padding: 1rem;
  max-width: 20rem;
}
.block > img {
  align-self: start;
  width: 100%;
}
.block > div {
  vertical-align: top;
}
.block h2 {
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}


body {
  background: #222;
  color: white;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  font-size: 85%;
  line-height: 1.4;
  margin: 0;
  padding: 1rem;
}

就像在flexbox, 我们可以图片膨胀出去，来把图片固定到顶端：align-self: start;。