Flottant divs dans le Bootstrap de mise en page

J'ai besoin de faire quelque chose comme ceci à l'aide de Bootstrap. "Fluide", le contenu de la page avec deux widgets à l'intérieur d'elle - première en haut à droite et le second à gauche-bas.

Widget1 est facile j'ai juste besoin class="pull-right". Mais que faire avec le second pour l'obtenir vers le bas de la page de garde "Contenu" flottant autour?

style="bottom:0;"ne fonctionne pas:
Avoir ce code

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

J'ai ce résultat:

Déplacement Widget 2 en bas n'aide pas non plus:

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

Toutes les idées de comment faire cela sans salir hacks (par exemple je pourrais utiliser JavaScript pour fixer Widget2 position)?

Ou (ok, ok) avec eux?

Pourquoi ne pas en bas:0 travail? Est le parent relativement positionné?
poster votre code...
Non, il n'est pas. J'ai ajouté le code réel de la question.
Merci @SowmyaShivaram
Pour un enfant de l'élément positionné, le parent doit être positionné. Définir le parent de position:relative et de l'enfant à la position:absolue, puis en bas:0 travail

OriginalL'auteur kostik | 2012-11-26

6

De tout ce que j'ai lu on ne peut pas faire exactement ce que vous voulez sans javascript.
Si vous flotter à gauche avant le texte
```
<div style="float:left;">widget</div> here is some CONTENT, etc.
```
Votre contenu roulés comme prévu. Mais votre widget en haut à gauche. Si vous au lieu de mettre le flotteur d'après le contenu
```
here is some CONTENT, etc. <div style="float:left;">widget</div>
```
Ensuite votre contenu sera envelopper la dernière ligne à droite du widget si la dernière ligne de contenu peut s'adapter à la droite du widget, sinon aucun emballage est fait. Pour faire des bordures et arrière-plans incluent l'flottait zone dans l'exemple précédent, la plupart des gens ajouter:
```
here is some CONTENT, etc. <div style="float:left;">widget</div><div style="clear:both;"></div>
```
Dans votre question, vous êtes en utilisant bootstrap qui ajoute juste row-fluid::after { content: ""} ce qui résout la frontière/fond.

Déplacer votre contenu vous donnera une ligne de texte :
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>
```
Merci, mais il ne fonctionne pas: dl.dropbox.com/u/4075902/Layout2.jpg. Vous voyez, le contenu n'est pas fluide à droite du widget
Le mien fonctionne très bien dans le jsfiddle exemple que j'ai posté. Vous aurez besoin pour me montrer un exemple qui ne fonctionne pas afin de la corriger.
Ok, j'ai fait quelques tests et comment il décide de renvoyer le texte en bas à droite n'est pas toujours intuitive. Il apparaît que si la dernière ligne de texte s'inscrit dans la largeur au droit de widget2 il l'a mis là, sinon il va garder la dernière ligne de contenu au-dessus de widget2. Je vais mettre à jour la solution avec de l'info.
pull-left + pull-right a fait le tour pour moi

OriginalL'auteur Daniel Moses
1

Je comprends que vous voulez le Widget2 partage le fond de la frontière avec le contenu de la div. Essayez d'ajouter
```
style="position: relative; bottom: 0px"
```
à votre Widget2 tag. Essayez aussi:
```
style="position: absolute; bottom: 0px"
```
si vous voulez prendre votre widget en bas de l'écran.

Je suis un peu rouillé avec CSS, peut-être le style correct est "margin-bottom: 0px" au lieu de "bottom: 0px", lui donner un essai. Aussi le pull-droit classe semble ajouter un "float=right" style de l'élément, et je ne suis pas sûr de savoir comment il se comporte avec "position: relative" et "position: absolute", je voudrais le supprimer.

OriginalL'auteur rodix

Vous devez vous connecter pour publier un commentaire.