-3

左側にアイコンを、右側にテキストをフロートさせる方法は?

画像投稿できずすみません。で見ることができますhttp://i.upanh.com/vafsnn

div class="col-md-3 ">
                <img src="img/service1.png"/>
                <div class="column4">
                    <h1>New way of vision</h1>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, telssa jumalesuada magna mollis euismod. Donec sed odio dui.</p>
                 </div>
            </div>
4

5 に答える 5

0

この CSS を試してください: 完全な jsFiddle をここで参照してください: http://jsfiddle.net/AuLtx/

 .image-css{
  height:45px;
  width:45px;
  float:left;
 }

 .column4 { margin-left:100px; margin-top:0px; margin-right:0px;}
于 2013-08-27T04:11:45.523 に答える
0

Bootstrap には、 と という名前の 2 つのクラスが既に.pull-leftあり.pull-rightます。

したがって、それらを適宜追加します。

于 2013-08-27T04:08:11.630 に答える
0

フローティング左の場合は .pull-left 、フローティング右の場合は .pull-right

于 2013-08-27T04:10:05.253 に答える
0

ブートストラップの浮動要素にpull-rightとを追加します。pull-left

<div class="col-md-3 ">
                <img src="img/service1.png" class='pull-left'/>
                <div class="column4" class='pull-right'>
                    <h1>New way of vision</h1>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, telssa jumalesuada magna mollis euismod. Donec sed odio dui.</p>
                 </div>
 </div>

更新: JSFiddle から、

1） bootstrap.cssが含まれていません

更新された JSFiddleを確認してください

于 2013-08-27T04:11:01.300 に答える
0 
<div class="col-md-3 ">
    <img style="float:left" src="http://lorempixel.com/100/100/"/>
    <div class="column4">
        <h1>New way of vision</h1>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, telssa jumalesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
</div>

フィドル: http://jsfiddle.net/gGxm7/

于 2013-08-27T04:11:20.240 に答える