Установка текста под 2 рядом друг с другом div

0

Что мне нужно сделать, чтобы установить текст под 2 divs, которые отображаются бок о бок (задано "float: left"). Прямо сейчас текст из раздела "внизу" отображается справа от второго тега div.

CSS

#wrapper {
    width: 500px;   
}
#leftcolumn, #rightcolumn {
    float: left;
    height: 200px;
    width: 250px;
}
#leftcolumn {
    background-color: #111;
}
#rightcolumn {
    background-color: #777;
}

HTML

<div id="wrapper">
    <div id="leftcolumn"></div>
    <div id="rightcolumn"></div>  
</div>
<div id="underneath">
    This should be underneath
</div>
Теги:

4 ответа

3
Лучший ответ
#underneath {
    clear: left;
}

Здесь JSFiddle: http://jsfiddle.net/WPNgL/

Поделиться
  • 1
    Лучше всего добавить код в ответ, так как внешние ссылки не всегда присутствуют и могут в конечном итоге исчезнуть.
  • 0
    @Metalskin: он действительно добавил код, я не понимаю, о чем вы просите
Показать ещё 2 комментария
1 
<div id="wrapper">
   <div id="leftcolumn"></div>
   <div id="rightcolumn"></div>  
</div>
<div style="clear:both"></div>
   <div id="underneath">
     This should be underneath
</div>

Вы не очистили поплавок

<div style="clear:both"></div>
Поделиться
1 
#underneath{

   clear:both;
}

Здесь, поскольку вы использовали float:left, div #underneath занимает пространство слева, то вы можете использовать clear:left или clear:both они отображаются под другими контейнерами, хотя есть пространство слева /right при использовании clear:both.

DEMO

FROM http://www.w3schools.com/cssref/pr_class_clear.asp

Свойство clear указывает, какие стороны элемента, где другие плавающие элементы не разрешены.

 left  -->  No floating elements allowed on the left side 
 right -->  No floating elements allowed on the right side
 both  -->  No floating elements allowed on either the left or the right side
 none  -->  Default. Allows floating elements on both sides 
 inherit --> Specifies that the value of the clear property should be inherited from the parent  element
Поделиться
0

вам просто нужно добавить div, чтобы очистить значение float

     .clear{
        clear:both;
      }

Проверка на скрипке

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню