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>