wie kann ich die position verschachtelte divs unten und float right?

Sagen, ich habe ein parent-div mit drei child-divs. Gibt es eine Möglichkeit, dass ich die position alles, was in der rechten unteren Ecke? So etwas wie dieses:

--------------------------------------
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|                   test1 test2 test3|
|------------------------------------|

Habe ich versucht, dieses css:

   #header
    {
        position:relative;
    }
    #nav_tabs
    {
        position:relative;
        width:50%;
        height:100%;
        float:right;
    }
    .tab
    {
        position:absolute;
        bottom:0px;
        float:right;
    }

Mit diesem HTML-Code:

<div id="header">
<div id="nav_tabs">
    <div class="tab">test1</div>
    <div class="tab">test2</div>
    <div class="tab">test3</div>
</div>
</div>

Aber wie es aussieht ist es stapeln sich meine tabs oben auf der anderen. Was ist der richtige Weg, dies zu tun?

InformationsquelleAutor Abe Miessler | 2011-03-17
  1. 9

    Tun. 

    #header
{
    width:500px;
    height:300px;
    position:relative;
    border:1px solid red;
}
#nav_tabs
{
    position:absolute;
    bottom:0;
    right:0;
}
.tab
{
    float:left;
    margin-right:5px;
}

    Check funktioniert beispielsweise bei http://jsfiddle.net/qpHNN/2/

    • Ich danke Ihnen, sir. Bonus-Punkte für jsfiddle Beispiel!
    • Was meinst du in der Breite: 100?
    • Ansonsten +1, es funktioniert
    • Es ist ein Tippfehler. Ich vergaß es während der Bearbeitung. Entfernen Sie es einfach. Ich aktualisierte die Antwort.
    InformationsquelleAutor Hussein
  2. 2

    Ich spielte mit Ihnen herum und kam mit etwas wie dieses.

    Bitte beachten Sie, dass dies hat einige Einschränkungen, so dass, wenn Sie etwas Abweichendes benötigen, sollten Sie definieren die Anforderungen noch deutlich. Die Einschränkungen sind:

    • den #header muss eine bestimmte oder zumindest kontrolliert die Höhe, da #nav_tabs ist aus der Strömung, so wird es nicht die Größe, wenn nötig.

    • die Lösung ist beschränkt auf 3 tabs, aber natürlich kann der Prozentsatz geändert werden

    So, hier kommt der CSS:

       #header
    {
        position:relative;
        height: 200px;
    }
    #nav_tabs
    {
        width:50%;
        position: absolute;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }
    .tab
    {
        float: left;
        width: 33%;
        text-align: right;
    }

    Und eine Live-Demo, die man spielen kann

    InformationsquelleAutor kapa
  3. -1

    Versuchen, diese css:

    #header
{
  position:relative;
}
#nav_tabs
{
  position:relative;
  width:50%; /* remove if you want at bottom right of page */
  height:100%;
}
#tabs
{
  position:absolute;
  bottom:0px;
  right:0px;
}
.tab {
  float:right;
}

    Und wickeln Sie die Tabletten mit einem anderen div:

    <div id="header">
  <div id="nav_tabs">
    <div id="tabs">
      <div class="tab">test1</div>
      <div class="tab">test2</div>
      <div class="tab">test3</div>
    </div>
  </div>
</div>

    Hoffe, das hilft!

    • Dieses funktioniert nicht. Es bringt Sie auf die Links in der Mitte von #header.
    • Ah sorry. Sie hatte die Breite der nav_tabs bei 50%, so würde es richten Sie Sie auf die untere Rechte div,, die passiert werden in der Mitte der Seite.
    • Ok sagen wir, wir entfernen width: 50%. Warum brauchen wir das extra-div nicht mehr?
    • Guter Punkt 🙂 ich war nur Fokussierung auf immer drei Elemente zu richten, die nebeneinander in der unteren rechten der anderen. Jetzt habe ich das Gefühl, ich habe gesündigt.
    • Ich bin betrunken 8 Uhr morgens und keine Lust, ich habe gesündigt. Sollten Sie nicht entweder, ich werde nicht versuchen, Hündin, nur zu diskutieren.
    • Haha. Ich bin bloß verkatert um 8 Uhr; weit weniger wünschenswerten Zustand. Ich freue mich über das feedback!
    • Immer betrunken... kein Kater für sicher.

    InformationsquelleAutor lebreeze
  4. -2

    Anstelle der Verwendung von verschachtelten divs verwende ich eine Liste, wie diese:

    <div id="header">
 <div id="nav_tabs">
  <ul>
    <li class="tab">test1</div>
    <li class="tab">test2</div>
    <li class="tab">test3</div>
  </ul>
 </div>
</div>

    Und in der CSS-Klasse tab ich würde hinzufügen der CSS-Eigenschaft display mit dem Wert inline:

    .tab ul
{
 position:absolute;
 bottom:0px;
 float:left;
 display: inline;
}

    Ich hoffe, das funktioniert für Sie.

    InformationsquelleAutor EmCo
Schreibe einen Kommentar