Плавающие divs в макете Bootstrap

Мне нужно сделать что-то подобное, используя Boostrap. Содержимое "Fluid" на странице с двумя виджетами внутри него - сначала в верхнем правом и втором в левом нижнем.

Widget1 легко - мне просто нужен class= "pull-right". Но что делать со вторым, чтобы получить его в нижней части страницы, поддерживая "Содержимое"?

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

Или (ok, ok) с ними?

Ответ 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>

Затем ваш контент будет переносить последнюю строку справа от виджета, если последняя строка содержимого может поместиться справа от виджета, иначе завершение не будет завершено. Для того, чтобы границы и фоны фактически включали плаваемую область в предыдущем примере, большинство людей добавляют:

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

Ответ 2

Я понимаю, что вы хотите, чтобы Widget2 делил нижнюю границу с содержимым div. Попробуйте добавить

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

для вашего тега Widget2. Также попробуйте:

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

если вы хотите привязать виджет к нижней части экрана.

Я немного ржавый с CSS, возможно, правильный стиль - "margin-bottom: 0px" вместо "bottom: 0px", попробуйте. Также класс pull-right, кажется, добавляет к элементу стиль "float = right", и я не уверен, как это ведет себя с "position: relative" и "position: absolute", я бы удалил его.