Есть ли в любом случае сделать div внутри div 'breakout' родительского div без указания ширины дочерних элементов, просто дочерних элементов

Question

т.е. у меня есть div, ниже скрытый div, который шире, чем div выше. Я хочу указать div внутри, чтобы элементы имели большую ширину, чем div выше. эти элементы с правой стороны выровнены по правой стороне div выше, но так как он шире, нужно, чтобы левая сторона вырвалась. Элемент div ниже находится на слое diff, чем элемент div выше, поскольку он появляется только при нажатии на элемент триггера элемента div выше.

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

Хммм, надеюсь, вы можете следовать. Очень ценю любую помощь. Заранее спасибо.

Answer 1

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

Answer 2

Вы, вероятно, должны просто использовать тег выбора (для удобства), даже если он не будет выглядеть необычно. Но если вы настроены, попробуйте что-то вроде этого (и добавьте свой код JavaScript, чтобы скрыть / показать список):

#wrapper {
    width: 500px;
}
#select {
    border: 1px solid black;
    width: 180px;
    float: right;
}
#options {
    float: right;
    clear: right;
    text-align: right;
}

и

<div id="wrapper">
    <div id="select">pick one...</div>
    <div id="options">
        <div class="option">I'm short</div>
        <div class="option">I'm a very very very very very long option</div>
    </div>
</div>

Если вы в конечном итоге используете это, измените параметры div на тег ul, а параметр div на теги li или что-то семантически более близкое к тому, что вы создаете. Я просто использовал div, чтобы сократить количество CSS в моем примере.