Absolut-Positionierung von Bildern innerhalb relativ positionierten div

Habe ich gesehen, dass mehrere Beiträge mit diesem Thema verbundene, aber kann immer noch nicht die folgende arbeiten:

.container {
    position: relative;
    width: 100%;
}

.left {
    position: absolute;
    left: 0px;
}

.right {
    position: absolute;
    right: 0px;
}

<html>
     <body>
          <div class="container">
              <img src="..." class="left"/>
              <img src="..." class="right"/>
          </div>
     </body>
</html>

Laut http://www.w3schools.com/css/css_positioning.asp, speziell die Zeile, die sagt:

Einer absoluten position element ist relativ positioniert, um der ersten übergeordneten element, das eine andere position als die statische. Wenn kein solches element gefunden wird, die mit block <html>

Das Problem ist, dass der div-container hat keine Höhe. Ich möchte wirklich nicht angeben, die Höhe des div-container. Ich weiß, dass floating das Bild Links, und das andere Bild richtig, und die Einstellung overflow: auto auf die div-container funktionieren wird, aber ich denke, ich hatte gehofft, nicht zu diesen Weg gehen, da ich gerne die Technik für die absolute Positionierung innerhalb eines relativ div.

Ist das möglich?

Ich denke, @Xactor richtig ist. Der beste Weg, das zu erreichen, was Sie beschreiben, ist die Verwendung von floats und clearing-Methode.
Wenn Sie eine übergeordnete, relativ ist, warum ist nicht die absolute position des untergeordneten Bildes arbeiten? Ich bin nicht verstehen, was meinen Sie mit "Das Problem ist, dass der div-container hat keine Höhe".

InformationsquelleAutor Justin Miller | 2011-04-05

  1. 4

    Gibt es keine Natürliche Art und Weise für den übergeordneten container, um die Größe dynamisch zur absolut positioniert Kindern, weil die Kinder außerhalb der Strömung.

    Der beste Weg, das zu tun, was Sie beschreiben, ist die Verwendung von floats und clearing-Methode:

    <style type="text/css" media="screen">
body {
  padding: 20px;
}
.container {
  position: relative;
  width: 100%;
  background: yellow;
}
.left {
  float: left;
  background: red;
  width: 100px;
  height: 200px;
}
.right {
  float: right;
  background: blue;
  width: 100px;
  height: 200px;
}
/* Use the clearfix technique: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-   
overflowhidden-demystified/*/
.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */
</style>
<body>
  <div class="container clearfix">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
</body>

    Wenn Sie darauf bestehen, zu tun, absolute Positionierung und müssen den übergeordneten container entsprechend der Höhe der Kinder, Sie zu greifen, zu javascript.

    Dank so viel. Ich denke, ich werde gehen mit dieser Methode. Man das ist viel zu Lesen aber über die clearfix-Methode.

    InformationsquelleAutor Xacto01

Schreibe einen Kommentar