0

twitter-bootstrap.css と angularjs を使用してレスポンシブ モバイル Web ページを開発しています。

フロートの概念を使用して、1 つの画像とテキストを並べて配置しようとしています。以下のスクリーンショットを参照してください。

私は画像に幅を与え、テキストに幅を与えませんでした.テキストが画像によって残された残りの幅を取るようにしたいので、

しかし、それは起こっていません。テキストが幅を超えている場合、テキストは画像によって残された利用可能な幅に折り返されるのではなく、次の行に来ます。

スクリーンショット #1

画像によって取り残された幅内にテキストが含まれている場合、テキスト コンテンツの幅が画像によって取り残された使用可能な幅よりも小さい場合。

http://i38.tinypic.com/wuqnuq.png

（全体画像へのリンク）

スクリーンショット #2

テキストが画像によって取り除かれた幅内で折り返されずに改行された場合、テキスト コンテンツの幅が画像によって取り除かれた使用可能な幅よりも大きい場合

http://i38.tinypic.com/vg04k8.png

（全体画像へのリンク）

スクリーンショット #3

必要に応じて、テキスト コンテンツの幅が画像によって除外された幅よりも大きい場合、テキストが画像によって除外された幅内に折り返されます。ただし、テキストには幅が設定されています。

http://i34.tinypic.com/33lfrd1.png

（全体画像へのリンク）

私のコードは

<html lang="en" ng-app>
    <head>
        <meta charset="utf-8">
        <title>My HTML File</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <style>
            .float-left {float:left !important;}
            .clearIt {clear:both !important;}
            .marRight5{margin-right:5px}
            .BgImg{background: url(images/img.png) no-repeat;height:25px;width:25px}
        </style>

        <script src="lib/angular/angular.js"></script>


    </head>
    <body>
        <div class="row-fluid">
            <div class="BgImg float-left marRight5"></div>
            <div class=" float-left">This is test content This is test content This is test content This is test content This is test content</div>
            <div class="clear"></div>
        </div>

    </body>
</html>
4

1 に答える 1