html - Bootstrap 布局中的 float div

Question

我需要使用 Boostrap 做这样的事情。页面上的“流动”内容包含两个小部件 - 第一个在右上角，第二个在左下角。

Widget1 很简单——我只需要 class="pull-right"。但是要如何处理第二个才能将其置于页面底部并保持“内容” float ？

style="bottom:0;" 不起作用:有了这个代码

<div class="container-fluid">
  <div class="row-fluid">
    <div class="offset1 span8 pull-right">
    ... Widget 1...
    </div>

    <div class="offset1 span8 pull-left" style="bottom:0;">
    ... Widget 2...
    </div>

    .... a lot of content ....

  </div>

</div><!--/.fluid-container-->

结果是这样的:

向下移动 Widget 2 也无济于事:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="offset1 span8 pull-right">
      ... Widget 1...
    </div>
      .... a lot of content ....
   <div class="span8 pull-left" style="bottom:0;margin-left: 0;">
      ... Widget 2...
   </div>
  </div>
</div><!--/.fluid-container-->

关于如何在不进行肮脏的黑客攻击的情况下做到这一点的任何想法(例如，我可以使用 JavaScript 来修复 Widget2 的位置)？

或者(好的，好的)和他们一起？

Answer 1

从我读到的所有内容来看，如果没有 javascript，您将无法完全按照自己的意愿行事。如果你在文字前向左浮动

<div style="float:left;">widget</div> here is some CONTENT, etc.

您的内容按预期换行。但是您的小部件位于左上角。如果您改为将 float 放在内容之后

here is some CONTENT, etc. <div style="float:left;">widget</div>

如果内容的最后一行适合小部件的右侧，则您的内容会将最后一行换行到小部件的右侧，否则不进行换行。为了使边框和背景实际上包括前面示例中的 float 区域，大多数人添加:

here is some CONTENT, etc. <div style="float:left;">widget</div><div style="clear:both;"></div>

在您的问题中，您使用的是 Bootstrap ，它只是添加 row-fluid::after { content: ""} 来解决边框/背景问题。

将您的内容向上移动会给您一个换行符: http://jsfiddle.net/jJNPY/34/

  <div class="container-fluid">
  <div class="row-fluid">
    <div class="offset1 span8 pull-right">
    ... Widget 1...
    </div>
    .... a lot of content ....
    <div class="span8" style="margin-left: 0;">
    ... Widget 2...
    </div>


  </div>

</div><!--/.fluid-container-->