Контейнер шириной столбца, не распространяющийся на все столбцы

Question

Имея немного проблемы с получением содержимого с шириной столбца для правильного отображения. Fiddle here.

Необходимо, чтобы серый фон распространялся на все, а не только на первый столбец. Проблема возникает из-за использования «width:300px;» на «.wrapper», но если это будет удалено, столбцы не будут иметь одинаковую ширину/высоту и становятся все беспорядочными при изменении размера браузера. Какие-нибудь советы?

Большое спасибо!

.wrapper { 
    width:300px; 
    background:#ccc; 
} 
.wrapper p { 
    height:300px; 

    -webkit-column-width:300px; 
    -moz-column-width:300px; 
    column-width:300px; 
} 

Answer 1

Я не совсем уверен, что это то, что вы ищете, поскольку тема для меня несколько неясна.

Серый фон 300 пикселей, потому что вы устанавливаете фон на обертке, которая составляет 300 пикселей. Чтобы получить его по всей ширине, все, что нам нужно сделать, это удалить ширину из оболочки и добавить ее в элемент p.

.wrapper { 
    background:#ccc; 
} 
.wrapper p { 
    width: 300px; 
    height:300px; 

    -webkit-column-width:300px; 
    -moz-column-width:300px; 
    column-width:300px; 
} 

http://jsfiddle.net/h53wbrsb/1/