Как разместить Div внизу другого div?

#css

Вопрос:

Я хочу разместить один DIV (разделение идентификаторов) внизу другого DIV (основное содержимое)

Вот класс CSS для DIV (идентификатор содержимого-основной)

 .layout-3 #content-primary {
    padding: 0 10px;
    width: 502px;
}

#content-primary.article {
    padding-bottom: 2.5em;
}

#content-primary {
    width: 501px;
}

#content-primary {
    clear: left;
    float: left;
    margin: 12px 0 0;
    padding: 0 10px;
    width: 500px;
}

Вот класс CSS для DIV (совместное использование идентификаторов)

 #eSharing {
    height: 230px;
    margin: 12px 0 0;
    overflow: auto;
    padding: 0 10px;
    position: relative;
}

Ссылка на скриншот http://i.stack.imgur.com/bMqXD.png

Скриншот 2 вот правильное размещение этих divs

введите описание изображения здесь

1. можете ли вы показать свой соответствующий HTML-код?

2. находится #eSharing ВНУТРИ #content-primary или ПОСЛЕ него? Как сказал @Daniel, нам нужен ваш HTML.

3. Покажите нам html и css в jsFiddle.

4. Привет, ребята, я опубликовал снимок экрана страницы

5. #esharing находится после #content-primary

Ответ №1:

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

Вы перемещаете один div и хотите разместить другой div прямо под ним?

Почему бы не поместить оба divs внутри внешнего div и вместо этого использовать внешний div? Таким образом, два внутренних div будут располагаться один поверх другого.

РЕДАКТИРОВАТЬ: Я вроде как объяснил это, но вот пример:

 <div id="outer">
    <div id="content-primary">Your content</div>
    <div id="eSharing">Other content</div>
</div>

а для CSS не используйте float либо content-primary , либо eSharing . Вместо этого сделайте что-то вроде этого:

 #outer {
    clear: left;
    float: left;
}

#content-primary {
    width: 501px; /* why? */
}

#content-primary {
    margin: 12px 0 0;
    padding: 0 10px;
    width: 500px;
}

#eSharing {
    height: 230px;
    margin: 12px 0 0;
    overflow: auto;
    padding: 0 10px;
}

Ответ №2:

РЕДАКТИРОВАТЬ: Вот еще один вариант, при котором у вас есть основная область содержимого «a», боковая панель «b» и два смежных контейнера под «c» и «d».

Демонстрация: http://jsfiddle.net/L655v /

Еще один, в котором есть основная область содержимого «a», боковая панель «b» и полноразмерная область содержимого «c» под ним…

http://jsfiddle.net/L655v/1/

(пытаюсь имитировать то, что могут подразумевать ваши снимки экрана).

Не уверен, что именно вам нужно, но вот несколько вариантов компоновки…

Демонстрация: http://jsfiddle.net/aNqak /

Вот код, который я использовал в своей скрипке…

HTML…

 <div id="a">a</div>
<div id="b">b</div>

<br /><br />

<div id="c">
    c
    <div id="d">d</div>
</div>

<br /><br />

<div id="e">e</div>
<div id="f">f</div>

CSS…

 #a {
    background-color: #999;
}
#b {
    background-color: #ddd;
}
#c {
    background-color: red;
    padding: 5px;
}
#d {
    background-color: pink;
}
#e {
    background-color: blue;
    float: left;
    width: 75%;
}
#f {
    background-color: green;
    float: right;
    width: 25%;
}