Как да изчистите салове за правилно позициониране на долния

Повечето новак CSS потребители никога не са чули, дори на "ясни" собственост. Знам, че в миналото, не бях, и Ми racked мозъка с часове се опитва да си оформление да показват правилно с плаващи страничната лента. Ето как функционира:

При оказване divs, браузърите поток е нормално да пусне един, после после по нормалния поток на нещата, място следващия. Когато искате да имате divs рамо до рамо, обичайната решение е да се добави "плава" имущество за тях. В случая по-долу, както на "лявата навигационна" div и "съдържание" div имат собственост "плаваш: ляво". Ние можем после съдържанието вътре в БТК, divs и имат щастлив оформление. Проблемът е, няма нищо по нормалния поток на нещата да продължат оформлението, затова ние трябва да кажа на браузъра да прокара нещата. Забележка Тези два примера:

Неправилно:

  <div id="wrapper"> 
     <div id="left-nav"> 
         .... 
     </ div> 
     <div id="content"> 
         .... 
     </ div> 
  </ div> 
  <div ID = "footer"> <p> Всички този текст е скрит под плаващия divs! </ div> 

Правилно:

  <div id="wrapper"> 
     <div id="left-nav"> 
         .... 
     </ div> 
     <div id="content"> 
         .... 
     </ div> 

  <div style="clear: both;"> <! - ясни салове --></ div> 

  </ div> 
  <div ID = "footer"> <p> Моята крайна сега показва по-ниски от БТК, елементи! </ div> 

Това разказва една малка линия на браузъра на "Продължавай", и се движи потока надолу. Най-лесният начин за това е тест да даде "бандерол" А фоновия цвят и виж разликата в двата кодекс парчета, когато има съдържание във всеки елемент.

High Tech Web 2.0 интерактивни примери:

Пример 1 (Неправилно):

  +--(# бандерол )---------------------------------+ 
  | +-----------+ +--------------------+ | 
  +---| |----| |---+ 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | # Лявата навигационна | | # съдържанието | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      +-----------+ +--------------------+ 

Пример 2 (правилна):

  +--(# бандерол )---------------------------------+ 
  | +-----------+ +--------------------+ | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | # Лявата навигационна | | # съдържание | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | +-----------+ +--------------------+ | 
  | | 
  | + --- Ясно: и двете ----------------------- + | 
  | | 
 +---------------------------------------------+ 

Спънат го!

Мнение

Този пост беше публикуван на понеделник, 31ви декември 2007 година и се намира в CSS, дизайн. Има 197 мнения

Tags: CSS, хакове, съвети

Коментари на емисията. | Оставете коментар | Trackback раздяла.

Предишна публикация: Добавете Google Analytics код, за да ви през целия сайт флаш »
Следващ пост: AJAX Форма за контакт »

Най-гледани постове