HTML сила div, чтобы появиться внизу div

У меня есть это http://jsbin.com/AKUtEYu/1/edit.HTML сила div, чтобы появиться внизу div

Здесь я хочу показать изображение внутри div1 и ниже этого div1, также хочу показать кнопку отправки внутри div2. Проблема, которую я имею здесь, заключается в том, что второй div появляется под первым div.

P.S 1: Мне нужно использовать position:absolute в первом div. Я знаю, если я удалю его, проблема, кажется, исправлена, но я ищу способ с ним.

P.S 2: Я использовал сплошные границы, чтобы видеть, что происходит.

источник

2013-09-10 Co Koder

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

люди понятия не имеют, что вы имеете в виду. очень неясно. –

http://jsbin.com/AKUtEYu/6/edit –

Как уже говорилось чуть впереди меня, переместить кнопку вашего представить внутри #container родительского блока:

<div id="container"> 
    <img src="http://31.media.tumblr.com/tumblr_m50exyThDb1r4kc3co1_500.jpg" /> 

    <div id="footerSubmit"> 
     <input type="submit" alt="Submit" id="SubmitSelections" name="Submit"> 
    </div> 
</div>

В противном случае, вам придется установить высоту на #container и абсолютного или относительного положения на #footerSubmit, который намного больше работы ...

источник

2013-09-10 01:11:40

Но если я удалю позицию: абсолютный, я получаю то, что хочу. Как я могу получить тот же эффект, сохраняя позицию: абсолютный. Как вы думаете, это возможно? –

Вы упомянули о решении javascript, для этого случая я также могу его использовать. –

Абсолютные позиционированные элементы выводятся из потока документов. В вашем примере это означает, что '# container' выходит за рамки обычного документа, что означает, что он не знает, что' # footerSubmit' завершает работу. Аналогично, '# footerSubmit' не знает о' # container'. В результате '# footerSubmit' позиционируется в верхней части страницы, так как это первый элемент в потоке. Есть только два способа сохранения нижнего колонтитула ниже изображения, оберните их обоими в один и тот же родительский контейнер (как я показал) или укажите высоту для '# container', а затем используйте относительную или абсолютную позицию в' # footerSubmit'. –

Что делать, если вы положите второй div внутри первого? В конце концов, div s - это просто контейнеры - главное, чтобы кнопка была помещена под изображение.

источник

2013-09-10 01:07:10

@CoKoder Готовы ли вы указать значение высоты для контейнера изображения? Кроме того, вы хотите использовать решение для JavaScript? –

@MarcAudet, нет, я не готов указывать значение высоты для контейнера изображения. Я хочу решить это с помощью css. –

Если вы хотите его решить с помощью CSS, используйте абсолютное или относительное позиционирование на '# footerSubmit' ... –

Если вы знаете высоту вашего элемента absolutde/div, вы можете использовать его высоту, чтобы разместить свой относительный элемент. например, изменить div2 CSS, как

#footerSubmit{ 
     position:relative; 
     top:350px; 
     float:right; 
     border: 10px solid; 
     color:red; 

    }

В противном случае положить div2 внутри див1 и поместите его в bottom:0; и float:right;

источник

2013-09-10 01:25:37 Eez

HTML сила div, чтобы появиться внизу div

ответ

Смежные вопросы