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;。