Question

不只是段落旁边的简单图像＆lt;但是有一些像这样的空间

fdf http://gyazo.com/4502cc62f3704cf8008f0f9f3933d441.png

到目前为止我所做的一切：

 <div class="span6">

    <span class="head">Header</span>
            <img style="vertical-align:middle float: left;" src="img/pickaxe.png"/>
    <span class="paragraph">
        This is Photoshop's version  of Lorem Ipsum.
            Proin gravida nibh vel velit auctor aliquet.
            Aenean sollicitudin, lorem quis bibendum auc
        tor, nisi elit consequat ipsum, nec sagittis sem nibh i
    </span>

 </div>

.span8 {
   width: 620px;
}
.head {
   font-weight: bold;
   font-size: 26px;
   float: left;
}

.paragraph {
   font-size: 14px;
   width: 300px;

}

它看起来像这样

igm http://gyazo.com/c22a440e57135edc16a1f76555be4512.png 忽略该行，它是网络上的裁剪图像。

我做错了什么？我怎样才能解决这个问题。谢谢！

Answer 1

这是一个jsfiddle：http://jsfiddle.net/Xxw85/

代码看起来应该更像这样：

<div class="span6">

    <p>Header</p>
    <div class="head">
        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRgMvCRHrTA30jksWsHfDZ4GwWfjJhM8Ck2RAtA_OLeOpnGRTrEXw"/>
    </div>

    <div class="paragraph">
    This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auc
    tor, nisi elit consequat ipsum, nec sagittis sem nibh i
    </div>

    <div style="clear:both"></div>

 </div>

和css：

.span6 {
  width: 620px;
  background-color:#efefef;
}
.head {
font-weight: bold;
font-size: 26px;
float: left;
color:red;
}

.paragraph {
font-size: 14px;
width: 300px;
float:left;
}

祝你好运。

Answer 2

考虑这个小提琴。我在父div中使用了div元素而不是span元素。

<div>
<div class="head">Header</div>
<img style="vertical-align:middle float: left;" src="img/pickaxe.png"/>
</div>

通过添加此内容将内容浮动到右侧。

.paragraph {
 float:right;}

http://jsfiddle.net/AaXTm/8/

元素的宽度小于父元素，因为您没有使用任何浮点数或清除，所以元素是内联可见的。

对齐段落旁边的图像

2 个答案: