html - 又一个定位之谜

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

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

您可以为图像添加 CSS 样式

.left img { float: right;}