Как заставить div от всплывания

Question

Я обычно использую таблицу для разметки.Но я хотел бы попробовать макет в Div.Вот проблема: когда я «плаваю: оставил» div, он делает последующий div с ним плавающим.Я попытался поместить "float: none" в следующий div, чтобы он разбил строку, но это не работает.

Вот что я хочу сделать с помощью таблицы:

<hr style="width: 100%;" />
<table>
  <tr>
    <td>
      <div id="divLeftPane">
        ...
      </div>
    </td>
    <td>
      <div id="divCenterPane">
        ...
      </div>
    </td>
    <td>
      <div id="divRightPane">
        ...
      </div>
    </td>
  </tr>
</table>
<hr style="width: 100%;" />

Вот то, что я до сих пор пробовал с div с использованием float:

<hr style="width: 100%;" />
<div id="divContainer">
  <div id="divLeftPane" style="float: left;">
    ...
  </div>
  <div id="divCenterPane" style="float: left;">
    ...
  </div>
  <div id="divRightPane">
    ...
  </div>
</div>
<hr style="width: 100%;" />

Проблема с использованием div заключается в том, чтотакже плавает влево.Я попытался поместить float: ни одного до последнего div, тега HR и даже divContainer.Почему последний час плавает?

Answer 1

Это даст вам желаемый эффект:

<hr style="width: 100%;" />
<div id="divContainer">
  <div id="divLeftPane" style="float: left;">
    ...
  </div>
  <div id="divCenterPane" style="float: left;">
    ...
  </div>
  <div id="divRightPane" style="float:left; ">
    ...
  </div>
  <div style="clear: left;"></div>
</div>
<hr style="width: 100%;" />

Плавание 3-х оставшихся делителей заставит их появляться рядом, но вы заметите, что divContainer не принимает высоту тегов div внутриЭто.Добавление div с помощью clear: left в основном отменяет это.

edit: избегайте встроенных стилей, когда вы делаете это по-настоящему.

Answer 2

Использовать атрибут

ясно: левый;

на нижнем элементе.

Answer 3

добавление

#divContainer {
    overflow: hidden;
}

выполнит это без дополнительного div в конце