Проблема с заполнением css blueprint - PullRequest
Новая
       9

Проблема с заполнением css blueprint

0 голосов
/ 26 февраля 2012

Следующая разметка отлично выглядит с blueprintcss: 

<div class="container">
  <div class="span-12" style="background-color : cyan">
Hello
  </div>
  <div class="span-12 last" style="background-color : green">
Bye
  </div>
</div>

Вы получаете два столбца, которые занимают половину размера, это аккуратно: 

Hello              Bye

Теперь текст 'Hello' находится слишком близко к краю контейнера div, так что вы хотите добавить небольшой отступ, верно? 

<div class="container">
  <div class="span-12" style="background-color : cyan; padding-left : 5px">
Hello
  </div>
  <div class="span-12 last" style="background-color : green">
Bye
  </div>
</div>

За исключением, очевидно, что это не работает, и вы в конечном итоге получите столбец "До свидания" в разделе Привет: 

 Hello              
Bye

Уменьшение размера второго столбца не имеет смысла (поскольку я действительно хочу, чтобы он был "шириной столбца в 12 сеток".

Теперь добавляем еще один уровень разметки, но нужно ли это? 

<div class="container">
  <div class="span-12" style="background-color : cyan">
    <div style="padding-left : 5px">Hello</div>
  </div>
  <div class="span-12 last" style="background-color : green">
Bye
  </div>
</div>

Я что-то упустил?

Что мне здесь не хватает?

Ответы [ 3 ]

1 голос
/ 26 февраля 2012

Я подозреваю, что вы не используете box-sizing: border-box.Если вы используете это, ваше предлагаемое решение должно работать.В противном случае вам понадобится дополнительный уровень разметки.

Помните, что по умолчанию для ширины применяется применение к контенту, а не к границе, поэтому, когда Blueprint дает ширину, а вы задаете отступы, отступ -1004 * добавил к ширине, что плохо.Директива box-sizing: border-box исправляет это.

0 голосов
/ 29 февраля 2012

Необходимо добавить еще один div внутри div, чтобы у вас никогда не возникало проблем.

Я следую стандарту добавления внутренних div'ов к классу padding 

.padding { padding:1.5em; }

Итак, в вашем коде это будет выглядеть так: 

 <div class="container">
    <div class="span-12" style="background-color : cyan">
      <div class="padding">
           Hello
      </div>
    </div>
    <div class="span-12 last" style="background-color : green">
       Bye
    </div>
</div>
0 голосов
/ 26 февраля 2012

В зависимости от того, какой результат вы хотите, возможно, можно добавить border-left: 5px к этому конкретному .container. Если у вас сплошной цвет или сплошной цвет с прозрачностью rgba(), это не должно иметь никакого значения для остальной части макета. 

.container
{
  /* cyan is the test color */
  background-color: cyan;
  border-left: 5px;
  border-color: cyan;
  border-style: solid;
}

Blueprint делает умные вещи и лучше тестируется, чем мое предложение - если это не сработает, я бы использовал внутренний элемент для лучших кросс-браузерных (старых IE) результатов.

...