Blueprint CSS Framework или любая Grid-система: исправление для граничных div - PullRequest
Новая
       8

Blueprint CSS Framework или любая Grid-система: исправление для граничных div

0 голосов
/ 19 августа 2010

У меня возникли проблемы при попытке выложить свой сайт.Я использую Blueprint Framework , и это происходит, когда я применяю границы к моему div.Поскольку их ширина контролируется span-XX (или grid-xx, как я заметил в 960gs ), в момент, когда я применяю границы к любому элементу div, он выходит из сетки, как видно на этихimages out Нажмите, чтобы увеличить alt text Нажмите, чтобы увеличить

Единственный известный мне способ исправить это - изменить ширину элемента, но затем сетку каркаса.цель заканчивается, потому что у меня больше не будет классов span-XX.Есть ли другой способ исправить это?

Ответы [ 2 ]

3 голосов
/ 19 августа 2010

Если я правильно понимаю, у вас есть span-24 или что-то подобное, и вы хотите добавить к нему границу, верно? Мой предпочтительный способ сделать это 

<div class="span-24">
    <div class="box">here</div>
</div>

и добавьте границу к классу box для приведенного выше фрагмента.

0 голосов
/ 23 сентября 2011

Если вы не хотите вкладывать div, вы можете создать несколько дополнительных классов для граничных столбцов.Я использую 1px границы, поэтому я создал классы, такие как: 

.with-border-first {
  border: 1px solid red;
  margin-right: 8px;
}

.with-border {
  border: 1px solid red;
  margin-left: -1px; 
  margin-right: 9px;
}

.with-border-last {
  border: 1px solid red;
  margin-left: -2px;
}

Должен быть еще один, если вы хотите, чтобы границы вокруг div охватывали все столбцы (например, 24 в чертеже).

Затем я использую эти классы вместе с диапазонами, например: 

<div class="span-8 with-border-first">
...
</div>

<div class="span-8 with-border">
...
</div>

<div class="span-8 last with-border-last">
...
</div>
...