Почему эти теги Div не вкладываются должным образом?

Question

Если кто-то может дать здесь какое-либо понимание, это будет очень цениться. Я хочу создать вывод, который показывает бронирование в фитнес-классах на разные даты. Идея состоит в том, чтобы иметь три в поперечнике, и, тем не менее, нужно много строк, чтобы охватить все даты. Для этого я бы хотел использовать CSS, а не прибегать к таблицам.

Хорошо, у меня есть следующие определения CSS:

.ListSetContainer 
{ 
  background-color:Red;
  border:1px solid #999999;
  text-align:center;
}

.ListSet
{
  margin: 2px 2px 2px 16px;
  float: left;
  clear:none;
}

.ListSet ul 
{
  background-color: #EEEEEE;
  border: 1px solid #999;
  margin: 2px 2px 16px 2px;
  padding: 6px 6px 0px 6px;
}

И следующий HTML:

  <div style="clear:both;">
    <h4>Class Dates, Counts and Participants</h4>
    <div class='ListSetContainer'>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
    </div>  -- End of First ListSetContainer

    <div class='ListSetContainer'>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
    </div>  -- End of Second ListSetContainer
  </div>  -- End of surrounding Div

Но вместо того, чтобы расположить три элемента по горизонтали, а затем второй ряд с двумя элементами, я получаю следующее:

Связанное изображение

Несколько заметок. Во-первых, обратите внимание, что иерархия в HTML (элементы DivSetContainer содержат элементы ListSet) не отображается в выходных данных. Во-вторых, элемент ListSetContainer имеет высоту всего один пиксель - фон не отображается! (Я использую красный фон только для того, чтобы не пропустить его). Весь окружающий div просто сдавлен, а внутренние div выплывают самостоятельно. Установка высоты вручную не работает, потому что внутренний div со списком имеет переменную высоту (и это выглядит странно для загрузки). Если я удалю поплавок: слева; из внутренних блоков они расширяются до полной ширины экрана, и поэтому я не могу получить три подряд. Итак ... я в растерянности.

Опять же, спасибо за любую помощь, которую вы можете предложить!

Answer 1

Ваш ListSetContainer должен содержать некоторый неплавающий контент, чтобы он имел высоту / ширину. Плавающий элемент выводит его из нормальной иерархии макета, и, таким образом, контейнер, содержащий только списки ListSets, не содержит ничего, что обычно отображается. Добавьте неразрывный пробел в контейнер, тогда вы сможете установить его ширину / высоту, так как в нем будет что-то отображать.

Я бы также использовал ваш ListSetContainer clear: both. Это должно заставить его начать новую «строку» ListSets.

Answer 2

Вы представляете табличные данные с фиксированным набором столбцов - один раз в месяц. Похоже, для чего таблицы должны быть использованы. Теперь у вас есть шанс использовать таблицы и не чувствовать себя виноватым!

Теперь, если вы не собираетесь использовать таблицы, вы должны фиксировать размер каждого элемента, но не количество элементов в строке. Пусть количество столбцов будет определяться размером окна браузера.

Если все это не удастся, думаю, вам нужно clear: both между рядами.

Answer 3

Это потому, что ListSetContainer не имеет заданной ширины. я ожидаю, что они все поместятся в один ряд на широкоэкранном мониторе.

Вы можете попробовать:

.ListSetContainer {
    width: 300px;
}

.ListSet {
    clear: none;
    float: left;
    width: 100px;
}

И стиль по необходимости.

Answer 4

Проблема заключается в том, что вашему классу ListSet требуется "display: block;" добавление или "плавать: слева;" удаление и при добавлении блока добавьте «display: block; width: 100%» в класс ListSetContainer.

Answer 5

Используйте clear:both для блока .ListSetContainer.

Но вы все еще можете улучшить это, используя только один список:

<style type="text/css">
    .ListSetContainer {
        list-style: none;
        padding: 0;
    }
    .ListSetContainer li {
        width: 33.333%;
        float: left;
    }
    .ListSetContainer li li {
        width: auto;
        float: none;
    }
</style>
<ul class="ListSetContainer">
    <li><ul><li>...{Class information here...}</li></ul></li>
    <li><ul><li>...{Class information here...}</li></ul></li>
    <li><ul><li>...{Class information here...}</li></ul></li>
    <li><ul><li>...{Class information here...}</li></ul></li>
    <li><ul><li>...{Class information here...}</li></ul></li>
</ul>