另一個定位謎語

Question

我想有它旁邊有方形圖像的物品和文字兩行兩個列表，很好地對準

_________         ________ 
|  |        |  |  | 
|  |  Line one h3 tag   |  |  |  Line one h3 tag 
|  |  Line two p tag   |  |  |  Line two p tag 
|  |        |  |  | 
_________        |  __________ 

這裏是我的代碼：http://jsfiddle.net/PEMKs/3/

HTML：

<div class="wrapper">  
    <div class="right clearfix"> 
     <img src="http://placehold.it/100x100" > 
     <h4>My name is Markup.</h4><p>I live in Vienna</p> 
    </div> 
    <div class="left "> 
     <img src="http://placehold.it/100x100" > 
     <h4>My name is Markup.</h4> <p>I live in Vienna</p> 
    </div> 
</div>​ 

CSS：

.wrapper{ 
    width:650px 
} 

.right{ 
    width:300px; 
    height:100px; 
    position:relative; 
    float:right; 
} 

.right h4, .right p{ 
    float:right; 
    margin-right:25px; 
    font-family:sans-serif; 
} 

.left{ 
    width:300px; 
    height:100px; 
    position:relative; 
    margin-right:145px; 
    border-right:1px dashed #cccccc; 
} 

.left h4, .left p{ 
float:right; 
    margin-right:25px; 
     font-family:sans-serif; 
} 

.clearfix:after { 
    content: "."; 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
} 

p{ 
display:inline-block; 
} 

Answer 1

這是怎麼工作的？

http://jsfiddle.net/42XUW/

Answer 2

您可以添加CSS樣式，以你的形象

.left img { float: right;} 

Answer 3

<div class="wrapper">  
    <div class="right clearfix"> 
     <img src="http://placehold.it/100x100" style="float:left;" > 
     <h4>My name is Markup.</h4><p>I live in Vienna</p> 
    </div> 
    <div class="left "> 
     <img src="http://placehold.it/100x100" style="float:left;" > 
     <h4>My name is Markup.</h4> <p>I live in Vienna</p> 
    </div> 
</div>​ 

圖像的風格將被設置爲浮動：左。它解決了你的問題。