Абсолютно позиционирование изображений внутри относительно позиционированного div - PullRequest
Новая
       40

Абсолютно позиционирование изображений внутри относительно позиционированного div

11 голосов
/ 05 апреля 2011

Я видел несколько сообщений, связанных с этой проблемой, но все еще не может заставить работать следующее: 

.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>

Согласно http://www.w3schools.com/css/css_positioning.asp,, в частности, строка, которая гласит:

Элемент абсолютной позиции позиционируется относительно первого родительского элемента, который имеет позицию, отличную от статической. Если такой элемент не найден, содержащим блоком является

Проблема в том, что у контейнера div нет высоты. Мне бы очень не хотелось указывать высоту контейнера div. Я знаю, что плавающее одно изображение влево, а другое - вправо, и установка переполнения: auto на контейнере div будет работать, но я думаю, я надеялся, что мне не придется идти по этому пути, поскольку мне нравится техника абсолютного позиционирования внутри относительный дел.

Возможно ли это?

1 Ответ

4 голосов
/ 05 апреля 2011

Не существует естественного способа динамического изменения размера родительского контейнера для ваших абсолютно позиционированных дочерних элементов, потому что дочерние элементы находятся вне потока.

Лучший способ сделать то, что вы описываете, это использовать поплавки и метод очистки: 

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 */
<body>
  <div class="container clearfix">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
</body>

Если вы настаиваете на абсолютном позиционировании и хотите, чтобы родительский контейнер соответствовал высоте дочерних элементов, вам придется прибегнуть к javascript.

...