Блог

Главная - Вопросы по программированию - Как я могу заставить свой DIV отображаться под другим DIV

Как я могу заставить свой DIV отображаться под другим DIV

#html #css

#HTML #css

Вопрос:

У меня такая ситуация:

 <div A>
  <div B>
  <div C>

Div A — это контейнер во всю ширину экрана для B и C.
Div B — это небольшой прямоугольник, скажем, 100 на 200 пикселей
Div C — это еще один маленький прямоугольник, скажем, 100 на 200 пикселей.

Теперь происходит то, что B и C отображаются в одной строке. Я бы хотел, чтобы C был ниже B. Возможно ли расположить Div таким образом. Я надеюсь, что это имеет смысл.

Комментарии:

1. Нам нужно увидеть ваш CSS, и в идеале задействованный реальный HTML (на случай, если там что-то сломано). Divs по умолчанию являются блочными элементами, и C уже должен отображаться под B. Что-то, вероятно, в CSS, заставляет этого не делать.

2. Здравствуйте, они отображаются как блоки. Проблема в том, что блок C следует за блоком B в той же строке. Я думаю, это происходит потому, что есть пробел. Мой вопрос в том, как я могу заставить его перейти ниже B?

3. Моя точка зрения не в том, выглядят ли они как блоки. Я имею в виду, что они являются блочными элементами и как таковые уже должны делать то, что вы хотите. Из вашего описания следует, что они ведут себя как встроенные элементы (или как будто они перемещаются), и это происходит только в том случае, если вы скажете им это сделать. Вот почему нам нужен ваш CSS.

Ответ №1:

Я предполагаю, что они уже перемещены влево, иначе они не были бы рядом друг с другом. Простое clear: left на C сделает свое дело:

 #B {
    float: left;
    width: 100px;
    height: 200px;
    background: #0f0;
    margin: 5px;
}
#C {
    float: left;
    clear: left;
    width: 100px;
    height: 200px;
    background: #00f;
    margin: 5px;
}

Я добавил некоторые поля, отступы и фон для наглядности.

Пример:http://jsfiddle.net/ambiguous/uCBYV /

Ответ №2:

Проверьте это:

HTML-КОД

 <div id="1"> container
   <div id="2"> first in
   </div>
   <div id="3"> second in
   </div>
</div>

А затем css, чтобы добавить некоторый стиль:

 div
{
 border-style:solid;
border-width:1px;  
}

Смотрите это в прямом эфире здесь: http://jsfiddle.net/CaN87 /

Третий div находится прямо внизу второго, и поэтому я полагаю, что у вас возникли некоторые проблемы с вашим CSS-кодом…

Ответ №3:

По умолчанию C должно быть ниже B. Можете ли вы опубликовать некоторый html и стили, применяемые к разделам? Похоже, что что-то меняет их отображение на «встроенное» или что они плавающие.