Как добавить отступы для повторного создания фона CSS без заполнения содержимого? - PullRequest
Новая
       1

Как добавить отступы для повторного создания фона CSS без заполнения содержимого?

1 голос
/ 18 января 2012

Есть ли способ дополнить повторяющееся фоновое изображение, которое также не добавит отступы к содержимому?

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

HTML 

<div id="container">
    <div id="col1" class="col">col 1</div>
    <div id="col2" class="col">col 2</div>
    <div id="col3" class="col">col 3</div>
    <div class="clearFix"></div>
</div>

CSS 

div#container {
    width:340px;
    border:1px solid #0f0;
    margin:30px;
    background:url(http://i.stack.imgur.com/PEE4K.png) 0 0 repeat-y;
}

div.col {
    float:left;
    width:100px;
    height:60px;
    margin:0px 10px;
    background-color:#f00;
}

div#col1 {
    margin-left:0;
}

div#col3 {
    margin-right:0;    
}

div.clearFix {
    clear:both;   
}

При использовании с моим повторяющимся изображением:

enter image description here

Это выглядит так:

enter image description here

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

enter image description here

Важно, чтобы при масштабировании столбцов отступы тоже двигались:

enter image description here

Кто-нибудь знает, как этого добиться,желательно без дополнительной разметки и определенно без JavaScript?

http://jsfiddle.net/shanethehat/a2EKM/

1 Ответ

2 голосов
/ 18 января 2012

измените это в своем определении div.col css: 

div#container {
    margin:40px 30px;
}

div.col {
    margin:-10px 10px;
}

, как заметил @BoltClock, это не будет работать, если вам также нужна зеленая рамка.если вам не нужна граница, это должно работать нормально даже в ie6.

...