Anwendung position und dann position:absolute macht der div-Strecke über die container?

Hier ist mein code..

<div id="secondWrapper">
    <div class="para1">  
      <div class="heading">
        <h1>Heading 1</h1>
      </div>
      <div class="paragraph">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at ipsum in nunc dignissim fringilla. Donec porta elit ut diam eleifend eget rhoncus risus dignissim. Vivamus malesuada accumsan molestie. Maecenas lobortis, ipsum sit amet mattis tincidunt, turpis odio tempus massa, at scelerisque elit diam id dolor. 
        </p>
      </div>
    </div>
    <div class="para2">  
      <div class="heading">
        <h1>Heading 2</h1>
      </div>
      <div class="paragraph">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at ipsum in nunc dignissim fringilla. Donec porta elit ut diam eleifend eget rhoncus risus dignissim. Vivamus malesuada accumsan molestie. Maecenas lobortis, ipsum sit amet mattis tincidunt, turpis odio tempus massa, at scelerisque elit diam id dolor. 
        </p>
      </div>
    </div>
    <div class="social_icons">
      <a class="btn" href="#">
          <i class="icon-twitter-sign icon-large"></i> Follow us on Twitter</a>

      <a class="btn" href="#">
          <i class="icon-facebook-sign icon-large"></i> Find us on Facebook</a>

      <a class="btn" href="#">
         <i class="icon-facetime-video icon-large"></i> Subscribe on Youtube</a>
    </div>
  </div><!-- /container -->

- Und CSS -...

    #secondWrapper{
    height:144px;
    width:740px;
    margin:0 auto;
    position: relative
    }

.para1 {
    width:211px;
    padding-right: 39px;
    display: block;
    overflow: hidden;
    float: left
}

.para2 {
    width:211px;
    padding-right: 39px;
    display: block;
    float: left;
}

.social_icons {
    width: 211px
    display: block;
    position:absolute;
}

.heading {
    padding-bottom:31px;
}

.paragraph {
    width:211px;
}

Hier ist mein problem. Mit dem obigen code die sozialen Symbole, die enthalten sind in den social_icons div schweben an die Spitze der div und nicht wirklich was mir der Blick, im der Suche nach.

So, ich will um Sie zu positionieren, um den unteren Rand des div-Sie sind also mehr inkeeping mit dem rest der text auf der Seite. Eine Möglichkeit, dies zu tun (so sagt Google). Gelten position: absolute zu meinen div-container (secondWrapper) und dann gelten position:relative und bottom: 0 zu den social_icons div.

Jedoch, wenn ich dies tun es ist nur erstreckt sich die divs Inhalt auf meine Seite und ignoriert die width Einschränkung, die ich bereits angewendet.

Kennt jemand einen anderen Weg, um die Lösung, die ich Suche?

InformationsquelleAutor Keva161 | 2012-04-01
  1. 7

    Du bist nicht wirklich nutzen des bootstrap-grid-system. Sie können leicht umschreiben, was Sie haben, um es zu unterstützen und nicht zu greifen, zu position:absolute es zu tun.

    First off, Sie erstellen Ihre eigenen container, die bootstrap hat bereits einige .span Klassen gemacht für Sie, dass Sie verwenden können, um Ihren wünschen, so schreiben Sie das markup mit Ihnen wie dieses:

    HTML

    <div class="container">
  <div class="row">
    <div class="span4">
      ....
    </div>
    <div class="span4">
      ....
   </div>
    <div class="social_icons span4">
      ....
    </div>
  </div>
</div>

    Dann können Sie den Stil, der Ihre social-icons einfach durch targeting die span container mit Ihrer eigenen Klasse.

    Demo

    • Dies ist viel aufgeräumter als mein Vorschlag, und es macht die Nutzung der bereit gestellten grid-system von Twitter Bootstrap!
    InformationsquelleAutor Andres Ilich
  2. 1

    Wenn ich es zu verstehen, richtig Sie, was Sie wirklich wollen, zu tun ist, wird der div-container secondWrapper zu position: relative und legen Sie dann das innere div social_icons div position:absolute.

    Kann ich nicht sehen, keine Positionierung in Ihrem Beispiel, aber wenn Sie wollen, Bearbeiten Sie Ihre Frage mit der aktuellen version der code umfasst die Positionierung, dann werde ich schauen.

    Ist dies die Art von Sache, die Sie suchen?
    http://jsfiddle.net/dannymcc/tXFTt/1/embedded/result/

    Wenn ja, nehmen Sie einen Blick auf den code
    http://jsfiddle.net/dannymcc/tXFTt/1/

    Anstatt über die jeweiligen Schaltflächen-Klassen, die ich verwendet habe :nth-child(1), weil Sie der gleichen Klasse für die Schaltflächen.

    Ich auch eine Höhe für das Dritte div-Element, die müssen möglicherweise ändern, sobald Sie abgeschlossen haben die änderungen an der schriftart etc.

    Gibt es wahrscheinlich einen besseren Weg, dies zu tun, wenn Sie mit Twitter bootstrap oder ähnlichen. Dies ist nur ein quick and dirty Weg, um es getan.

    • Ich habe nicht post-it mit der Setzung, wie das ist, was mir das problem. Ich habe aktualisiert mein Erster post, obwohl mit der Positionierung Vorschläge, die Sie gemacht haben.
    • Könnten Sie eine schnelle Skizze, wie Sie erwarten, dass die Seite angezeigt wird?
    • Dies ist, wie der code ist derzeit die rendering-divs jsfiddle.net/dannymcc/tXFTt, was Sie wollen passieren? Wollen Sie die social-icons unter dem linken div?
    • i41.tinypic.com/2lbhkxh.jpg
    InformationsquelleAutor dannymcc
Schreibe einen Kommentar