CSS有像浮在描述列表项

Question

我有一个描述列表这样的权利：

<dl> 
    <dt>Employer 2</dt> 
    <dd>2013 - present</dd> 
    <dd>Job description</dd> 

    <dt>Employer 1</dt> 
    <dd>2010 - 2013</dd> 
    <dd>Other job description</dd> 
</dl> 

我想有一个像浮在页面与雇主1的标志和右侧2.每个图像的顶部将是在“雇主1”和“雇主2”线的电平。

有什么办法可以用CSS轻松做到这一点吗？

非常感谢！

- Arthur;

Answer 1

你不得不改变HTML和它拆分成两个列表由两个div包裹这样的：

.wrap1>img { 
 
    float: right; 
 
    margin-bottom: 0.5em; 
 
} 
 

 
.wrap1 { 
 
    clear: both; 
 
    width: 50%; 
 
}

<div class="wrap1"> 
 
    <img src="http://placehold.it/70x100/d7a"> 
 
    <dl> 
 
    <dt>Employer 2</dt> 
 
    <dd>2013 - present</dd> 
 
    <dd>Job description</dd> 
 
    </dl> 
 
</div> 
 
<div class="wrap1"> 
 
    <img src="http://placehold.it/70x100/7da"> 
 
    <dl> 
 
    <dt>Employer 1</dt> 
 
    <dd>2010 - 2013</dd> 
 
    <dd>Other job description</dd> 
 
    </dl> 
 
</div>