проблема высоты макета CSS с сеткой, подобной макету - PullRequest
Новая
       26

проблема высоты макета CSS с сеткой, подобной макету

0 голосов
/ 20 октября 2010

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

Как получить, чтобы все наборы полей имели одинаковую высоту с самым высоким набором полей в этой строке?

fieldset {
    float: left;
    width: 278px;
    margin: 10px;
    height: inherit; 
    display: inline;
    border: 1px solid #000000;
}

Это несколько работает, кроме проблемы с высотой.Мне нужна не настоящая сетка, а динамическая компоновка сетки, поэтому, если кто-то с экраном 800x600 смотрит на сайт, а у меня на странице девять наборов полей, он должен видеть что-то вроде сетки 3x3.Если у вас экран большего размера, вы можете увидеть что-то вроде сетки 5x4.

1 Ответ

3 голосов
/ 20 октября 2010

Вам придется сделать некоторые выборы, поскольку это не может быть сделано именно так, как вы хотите, используя чистый CSS.С Javascript вы могли бы сделать эту работу, но не чистый CSS.

Имея это в виду.Вы можете заменить наборы полей на прокручиваемые элементы div, чтобы получить версию CSS только для CSS (обратите внимание, что полное содержимое элемента div будет отображаться не во всех случаях. Пользователь может нуждаться в прокрутке).Пример: 

<style>
  div {
    float: left;
    width: 278px;
    margin: 10px;
    height: 100px; 
    border: 1px solid #000000;
    overflow: auto;
  }
</style>

Вы можете попробовать это здесь

Наконец, другим выбором будет манипулирование высотой наборов полей с использованием javascript после загрузки элементов.

...