[ERLEDIGT] DIV in DIV positionieren?

[Dsimon24]

Hallo zusammen,

ich möchte mehrere Div´s in einem Div positionieren.

Mein Code:

<div class="row">
   <div class="col-md-3">
      <img id="pic1" src="img/1.jpg" alt="Smiley face">
      <div class="kreis"></div>
      <div class="kreis"></div>
   </div>
</div>

Die beiden Kreise sollen im DIV Positioniert werden.
Einer rechts oben, einer links unten.
Wie bekomme ich sowas hin?

Mein CSS:

div.kreis {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: #ff00ff;
    position: relative;
}

VG, David

 

[SpiceLab]

Die beiden Kreise sollen im DIV Positioniert werden.
Einer rechts oben, einer links unten.
Wie bekomme ich sowas hin?

Klassische Positionierung:

1. Eines der beiden Elternelemente relativ, und die Klasse .kreis absolut positionieren.
2. Mit zwei weiteren Klassen die jeweils gewünschten Startpositionen (top/right & bottom/left) festlegen.

Flexbox in der Kombination von:

1. http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-self
2. http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify_space-between

 

[Dsimon24]

Klassische Positionierung

1. http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify_space-between

Ob´s auch geht, dass ich zwei Reihen untereinander, aber im gleichen
DIV (weil es ein Hintergrundbild beinhalten soll) erstellen kann?

 

[SpiceLab]

Klassische Positionierung:

1. http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify_space-between

Ob´s auch geht, dass ich zwei Reihen untereinander, aber im gleichen
DIV (weil es ein Hintergrundbild beinhalten soll) erstellen kann?

Beim Zitieren ist was gehörig durcheinander geraten - der Link hat nichts mit der klassischen Positionierungstechnik zu tun.

Die vertikale "Reihung" erfolgt mittels http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-self - von daher versteh' ich im Moment Deine Frage nicht.