自举布局中的浮动div

我需要使用Boostrap来做这样的事情。页面上的“流体”内容带有两个小部件 - 首先在右上角，然后在左下角。自举布局中的浮动div

enter image description here

WIDGET1很简单 - 我只需要类= “右拉”。但是如何处理第二个问题以将其保留在“内容”的页面底部？

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

我有这样的结果：

enter image description here

移动的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-->

enter image description here

任何想法如何做到这一点没有肮脏的黑客（例如我可以使用JavaScript来修复Widget2的位置）？

或（ok，ok）与他们？

来源

2012-11-26 kostik

为什么不下：0工作？父母相对定位？ – danwellman

发布你的代码... – Sowmya

@danwellman - 不，它不是。我已将实际代码添加到问题中。 – kostik

从我看过的所有内容中，你都无法完成你想要的东西而没有使用JavaScript。如果你漂浮文本之前预期左

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

您的内容包装。但是您的小部件位于左上角。如果你不是把浮动内容后

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

那么你的内容将包裹中的最后一行到小部件的权利，如果内容的最后一行可以适合于小部件的权利，否则没有包装完成。为了使边框和背景实际上包括前面例子中漂浮的地区，大多数人补充：

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

在你的问题你正在使用引导其只是增加了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-->

来源

2012-11-26 15:26:53

谢谢，但它不起作用：http://dl.dropbox.com/u/4075902/Layout2.jpg。你看，内容不是在小部件的右边流动 – kostik

在我发布的jsfiddle例子中，我的工作很好。您需要向我展示一个无法解决问题的示例。 –

好的，我做了一些测试，它如何决定将文本包装到右下角并不总是直观。看起来，如果最后一行文本适合widget2右侧的宽度，它将放在那里，否则它会将最后一行内容保留在widget2之上。我将用信息更新解决方案。 –

我知道你想要的WIDGET2与内容共享DIV底部边框。尝试添加

style="position: relative; bottom: 0px"

到您的Widget2标记。另请尝试：

style="position: absolute; bottom: 0px"

如果您想将您的小部件捕捉到屏幕底部。

我对CSS有点生疏，也许正确的风格是“margin-bottom：0px”而不是“bottom：0px”，试试看。此外，拉右类似乎为元素添加了“float = right”样式，我不确定这是如何与“position：relative”和“position：absolute”相对应的，我将它移除。

来源

2014-03-05 23:13:18 rodix

自举布局中的浮动div

回答

相关问题