it-swarm.com.de

Richten Sie die Divs links, in der Mitte und rechts am unteren Rand derselben Zeile aus

Ich habe drei Divs, die ich in derselben Zeile anzeigen möchte. Jede der drei hat unterschiedliche Breiten und Höhen, und es handelt sich nicht um geraden Text. Ich möchte eine links ausrichten (ganz nach links), eine andere rechts ausrichten (ganz nach rechts) und die dritte zentrieren (in diesem Fall in der Mitte des enthaltenden Div, der gesamten Seite) ).

Außerdem möchte ich, dass die drei Divs vertikal am unteren Rand des enthaltenden Divs ausgerichtet sind. Die Lösung, die ich habe, richtet sie vertikal am oberen Rand des enthaltenden Div aus.

Was ist der beste Weg, um damit umzugehen?

18
jrdioko

Indem Sie Ihr Container-Div auf position:relative und das untergeordnete Div auf position:absolute setzen, können Sie die Divs absolut innerhalb der Grenzen des Containers positionieren.

Dies macht es einfach, da Sie bottom:0px verwenden können, um alle vertikal am Boden des Containers auszurichten, und dann mit dem linken/rechten Stil entlang der horizontalen Achse positionieren können.

Ich habe eine funktionierende jsFiddle eingerichtet: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ und der Code lautet:

HTML:

<div id="container">
    <div id="left">left</div>
    <div id="center">center</div>
    <div id="right">right</div>    
</div>

CSS:

#container {
    position:relative;
    height:400px;
    width:100%;
    border:thick solid black;
}
#container div {
    background:grey;
    width:200px;
}
#left {
    position:absolute;
    left:0px;
    bottom:0px;
}
#center {
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:0px;
}
#right {
    position:absolute;
    right:0px;
    bottom:0px;
}

Hinweis: Für das "mittlere" Div ist der linke Rand = 1/2 der Breite des Div :)

Hoffentlich hilft das :)

20
Damien-Wright

Meine Technik ähnelt @ Damien-at-SF:

Ich habe versucht, alle von Ihnen gewünschten Anforderungen konsequent zu demonstrieren.

Live Demo

HTML:

<div id="container">

    <div id="left"></div>
    <div id="mid"></div>
    <div id="right"></div>

</div>

CSS:

#container {
    position: relative;
    height: 400px;
    width: 80%;
    min-width: 400px;
    margin: 0 auto;

    background: #ccc
}
#left, #right, #mid {
    position: absolute;
    bottom: 0;
}
#left {
    left: 0;
    width: 80px;
    height: 200px;

    background: red
}
#right {
    right: 0;
    width: 120px;
    height: 170px;

    background: blue
}

#mid {
    left:50%;

    margin-left: -80px;
    width: 160px;
    height: 300px;

    background: #f39
}
4
thirtydot

Um dein Center Div elastisch zu machen, kannst du Folgendes tun:

<div style="display:table; width:500px;">
  <div style="display:table-row;">
    <div style="display:table-cell; width:50px;"></div>
    <div style="display:table-cell;"></div>
    <div style="display:table-cell; width:50px;"></div>
  </div>
</div>
2
Babiker

Eine weitere Verbesserung der ersten Antwort:

In der "Mitte" div CSS müssen Sie hinzufügen:

text-align:center;

Im "richtigen" div CSS müssen Sie Folgendes hinzufügen:

text-align:right;

... um eine perfekte Ausrichtung von links/mittig/rechts zu erreichen.

1
FoulFoot

Setze position: relative auf das enthaltende div, setze position: relative auf deine 3 divs und setze das Attribut bottom der 3 divs auf 0:

bottom: 0
0
Satya