0

段落<の横にある単純な画像だけでなく、このようないくつかのスペースがあります

fdf
（出典：gyazo.com）

これまで私がやったことの：

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

}

そして、それはこのように見えます

イグム
（出典：gyazo.com）

この行は無視してください。これは Web 上のクロッパー画像です。

私は何を間違っていますか？どうすればこれを修正できますか。ありがとう！

4

2 に答える 2

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;
}

幸運を。

于 2012-12-23T19:17:31.607 に答える
0

このフィドルを考えてみましょう。親 div 内の span 要素の代わりに div 要素を使用しました。

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

要素の幅は親要素よりも小さく、フロートやクリアを使用しなかったため、要素はインラインで表示されました。

于 2012-12-23T19:20:02.613 に答える