2013-05-08 2 views
2

Я хотел бы добавить li s в DIV. Этот DIV в качестве рамки для набора полей не имеет width и не имеет height. Размер должен быть автоматически задан с помощью прокладки. Проблема заключается в том, что DIV является элементом класса другого DIV:Как разместить DIV относительно нижнего угла левой стороны?

<div class="flag"> 
    <div id="drop_up"> 
     <fieldset> 
      <ul> 
       <li> 
       some content 
       </li> 
      </ul> 
     </fieldset> 
    </div> 
</div> 

Хорошо, что li «ы будет вставлен автоматически через петлю.

Теперь проблема заключается в том, что DIV представляет собой выпадающую рамку. Размер этого возрастает вверх, а не вниз, как обычно. Поэтому я не могу позиционировать это, используя левый, нижний и т. Д., Потому что высота будет отличаться в зависимости от чисел li.

Вопрос в том, есть ли способ поместить элемент по нижнему углу левой стороны? Обычно позиционирование влияет на верхний правый угол стороны, что бы не проблема, когда DIV растет вниз.

Если есть кто-то, кто может мне помочь, я действительно был бы признателен.

Спасибо большое.

+0

+1 для хорошего вопроса. Я в тупике, вне использования flexbox, я не могу придумать, как это сделать. – Michael

+0

У вас есть полная рабочая демонстрация, с которой мы могли бы поиграть? Скрипки? – jezzipin

+0

Я создам один, подождите минуту. – bonny

ответ

1

Если я понимаю, чего вы пытаетесь достичь, вы хотите, чтобы дно «drop_up» div всегда привязывалось к вершине их «флагов» div, т. Е. Независимо от того, сколько контента находится в «флаге», или «drop_up».

Предполагая, что мое понимание правильное, я предложил бы обернуть div'up div внутри другого div (который я назову 'drop_upHolder'), а затем абсолютное положение этого нового div в верхней части 'flag' div, а затем абсолютное положение в нижней части 'drop_up' div этого владельца div.

например.

<div class="flag">  
    <div id="drop_upHolder"> 
     <div id="drop_up"> 
      .... 
      .... 
     </div> 
    </div> 
</div> 

.flag #drop_upHolder { 
    position:absolute; 
    z-index:0; 
    top:0; 
    height:0 
} 
.flag #drop_up { 
    position: absolute; 
    z-index: 1; 
    background-color: gray; 
    padding: 25px; 
    bottom:0; 
} 

Надеюсь, это поможет.

+0

удивительно ... Я проверил его позже, но на первый взгляд похоже, что он выполнит эту работу, как мне понравилось. Спасибо, пока. – bonny

+0

привет, я пробовал и работает блестяще. большое спасибо. – bonny

+0

Добро пожаловать. – MarkP