Скелет реагирующей сетки сломанный - столбцы опускаются

-1

Итак, я только начал играть с демо-картой Skeleton - гибкой сеткой.Скелет реагирующей сетки сломанный - столбцы опускаются

На моей демонстрационной странице в заголовке я попытался поместить H1 в восемь столбцов div и кнопки в восемь столбцов - они находятся внутри контейнера с 16 столбцами.

Однако кнопки опускаются ниже H1.

Я действительно не вижу, где это пошло не так, если кто-то может увидеть что-то очевидное, тогда это было бы очень полезно.

источник

2012-07-03 user319940

Вы должны отправить код, а не ссылку на веб-страницу. Страница может «уйти» когда-нибудь и не оставляет ничего, чтобы будущие люди могли ссылаться, если у них есть аналогичная проблема. – ScottS

К сожалению, это бесплатный код для публикации (скелет css огромен, а разметка HTML не совсем маленькая). Любой ответ будет общим, поскольку скелет css стандартизирован, он все равно будет иметь смысл. Делает ниспровержение довольно глупым. – user319940

Все, что вам нужно извлечь, это код, относящийся к вашей проблеме. Просто глядя в Firebug, у вас будет всего несколько элементов для репликации HTML-кода заголовка, и каждый из этих элементов, по-видимому, имеет 2-4 селектора стиля, связанные с каждым, чтобы воспроизвести макет (вам не нужно размещать весь скелет css). Распространенным заблуждением является то, что весь код должен быть там, когда на самом деле часто небольшая часть может воспроизвести проблему в [jsfiddle] (http://jsfiddle.net/) и быть отправлена в рамках вопроса для справки. – ScottS

Похоже документация немного неясно - альфа и омега необходимо добавить к первым/последним столбцам для сортировки полей.

источник

2012-07-04 12:30:52 user319940

Подсветка для ответа? : S – user319940

Ваша проблема связана с полями. width из .sixteen.columns (940px), кажется, не поддерживает width и margin двух детей, которые .eight широких ([х 460 пикселей 2] в ширине + [10px х 4] в полях = 960px). Я не знаю достаточно о Скелете, чтобы узнать, является ли это их проблемой или нет, но это так.

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

# 1 Свернуть все дочерние Маржа

.sixteen > .eight.columns { 
    margin-right: 5px; 
    margin-left: 5px; 
}

# 2 Держите наружному краю и ликвидации Центра Margin

.sixteen > .eight.columns:first-child { 
    margin-right: 0; 
} 

.sixteen > .eight.columns:last-child { 
    margin-left: 0; 
}

источник

2012-07-03 12:50:17 ScottS

Скелет реагирующей сетки сломанный - столбцы опускаются

ответ

Смежные вопросы