0

我正在使用 twitter-bootstrap.css 和 angularjs 开发响应式移动网页。

我正在尝试使用浮动概念并排容纳一个图像和文本。请参阅下面的屏幕截图。

我给图像指定宽度，但我没有给文本指定宽度，因为我希望文本采用图像留下的剩余宽度，

但它没有发生，当文本超过宽度时，文本进入下一行而不是换行到图像留下的可用宽度。

屏幕截图 #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

1

将浮动从您的文本 div 中取出。浮动元素不环绕其他浮动，它们作为一个块围绕它们浮动，必要时换行。

http://jsfiddle.net/isherwood/jP6yd/

<div class="row-fluid">
    <div class="BgImg float-left marRight5"></div>
    <div>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>
于 2013-04-25T19:31:56.780 回答