html - さらに別のポジショニングのなぞなぞ

Question

正方形の画像とその横に 2 行のテキストを配置した 2 列の項目リストを作成したいと考えています。

_________                                    ________
|       |                             |     |        |
|       |     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

<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>​

画像のスタイルは float:left に設定されます。それはあなたの問題を解決します。

Answer 2

これはあなたにとってどのように機能しますか？

http://jsfiddle.net/42XUW/

Answer 3

画像に CSS スタイルを追加できます

.left img { float: right;}