Коробчатая тень, обрезанная в столбцах CSS в Chrome

Я хочу, чтобы элементы блока внутри столбцов CSS имели тень окна. Следующий, упрощенный код отображается как ожидалось в IE10 и Firefox 21, но в текущей версии Chrome (28.0.1500.72) тени рядом со сторонами столбца обрезаны.

Представленные изображения приводят к IE/FF (слева) и Chrome справа:

Code rendered in IE/FirefoxCode rendered in Chrome

(там также есть некоторый вертикальный сдвиг, но это не проблема)

Здесь jsfiddle: http://jsfiddle.net/buli_pl/KxYRc/1/

div#column-container {
  /* Set 2 columns*/
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
div#column-container div {
  background-color: yellow;
  /* set shadow for yellow elements */
  box-shadow: 0px 1px 3px #000;
  -webkit-box-shadow: 0px 0px 15px #000;
  -moz-box-shadow: 0px 0px 15px #000;
  box-shadow: 0px 0px 15px #000;
  /* Make sure that yellow div is not split between columns */
  display: inline-block;
  width: 100%;
  /* the rest - just to better present the problem */
  height: 70px;
  margin-top: 0;
  margin-bottom: 20px;
}
<div id="column-container">
  <div>box 1</div>
  <div>box 2</div>
  <div>box 3</div>
  <div>box 4</div>
  <div>box 5</div>
  <div>box 6</div>
</div>

Ответы

Ответ 1

Вы можете использовать flexbox для этого вместо столбцов css.

FIDDLE

NB: В настоящее время это не работает в Firefox, поскольку оно по-прежнему не поддерживает свойство flex-wrap, однако согласно caniuse - это будет поддерживаться в версии 28

CSS

div#column-container {   
    height: 270px; /* NB: IE requires the height property. max-height won't work on IE)*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}

EDIT: (Обновлен FIDDLE, который включает поддержку Firefox)

В соответствии с предложением @buli временно использовать -moz-colums-count для Firefox, пока гибкий перенос не поддерживается:

Ну, вы можете сделать это с помощью @supports, который позволяет нам выполнять функциональные запросы - вроде как Modernizr, но с CSS.

Хорошо, что Firefox поддерживает их.

Итак, если я добавлю следующий код: (обновляется согласно предложению Павла)

@supports (not (flex-wrap: wrap)) and (-moz-columns: 2) {
    div#column-container { 
        -moz-column-count: 2;
        column-count: 2;
        display: block;
        width: 50%;
    }
}

Теперь Firefox будет использовать столбцы CSS, тогда как другие браузеры будут использовать flexbox.

Ответ 2

это тоже должно работать: http://codepen.io/anon/pen/fiHCv

(из моего комментария, чтобы получить ваше представление об этом:))

Он может работать с помощью calc(), чтобы уменьшить ширину блоков, чтобы можно было видеть тени и переделывать маржу и отступы для более удобной компоновки 

div#column-container {   
    /* Set 2 columns*/
    column-count: 2;
  column-gap:0;
  width:80%;
  margin:auto;
  padding:20px 0;
}

div#column-container div {
    background-color: yellow;
    box-shadow: 0px 0px 15px #000; 

    /* Make sure that yellow div is not split between columns */
    display: inline-block;
  /* leave room for shadow to be drawn */
    width: calc(100% - 30px);
    /* the rest - just to better present the problem */
    height: 70px;
    margin: 20px;    
}

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

Ответ 3

Вот простой способ для Chrome: для ваших желтых блоков просто измените ширину и маржу. Чтобы всплывающая тень отображалась, вы хотите убедиться, что вокруг блока есть какая-то маржа.

width: 80%;
margin: 1em 10%;

http://jsfiddle.net/dPg2n/1/ --- Работает как в Chrome 31, так и в FireFox 10.0.2.

Ответ 4

Chrome не может компенсировать добавленную ширину тени.

Если вы добавите "text-align: center;" в контейнер столбцов div #, желтый внутренний div будет центрироваться, и теперь вы можете видеть тень на левом краю.

Если изменить незначительную "ширину: 100%"; на желтом внутреннем div до "width: 85%;" (или по ширине вашего выбора) теперь есть место для всей тени.

div#column-container {   
  /* Set 2 columns*/
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;

   /* insignificant - except text-align, which corrects Chrome */
  width: 50%;
  text-align: center;
}

div#column-container div {
  background-color: yellow;

  /* set shadow for yellow elements */
  box-shadow: 0px 1px 3px #000;
  -webkit-box-shadow: 0px 0px 15px #000;
  -moz-box-shadow:    0px 0px 15px #000;
  box-shadow:         0px 0px 15px #000; 

  /* Make sure that yellow div is not split between columns */
  display: inline-block;

  /* the rest - width was significant for Chrome, you may need to adjust for your real project */
  width: 85%;
  height: 70px;
  margin-top: 0;
  margin-bottom: 20px;    
}

Вот jsFiddle.

Ответ 5

Я думаю, что число столбцов противоречит хром...

Попробуйте это,

div # column-container {
  /* Установить 2 столбца */

 /* insignificant */
width: 50%;

}

div # column-container div {   background-color: yellow;

/* set shadow for yellow elements */
box-shadow: 0px 0px 15px #000;
-webkit-box-shadow: 0px 0px 15px #000;
-moz-box-shadow:    0px 0px 15px #000;


/* Make sure that yellow div is not split between columns */
display: inline-block;

/* the rest - not significant */
width: 46%;
height: 70px;
margin-top: 0;
margin-bottom: 20px;    
margin-right: 2%;    
float:left;

}

Ответ 6

div#column-container {   
    /* Set 2 columns*/
    overflow: hidden;
    padding: 5px;
    display: block;

     /* insignificant */
    width: 50%;
}

div#column-container div {
    background-color: yellow;
    float: left;
    width: 40%;
    margin: 5%;

    /* set shadow for yellow elements */
    box-shadow: 0px 1px 3px #000;
    -webkit-box-shadow: 0px 0px 15px #000;
    -moz-box-shadow:    0px 0px 15px #000;
    box-shadow:         0px 0px 15px #000;

    /* Make sure that yellow div is not split between columns */
    display: block;

    /* the rest - not significant */
    height: 70px;
}

Это даст вам почти похожий вид.

И Скриншот здесь.

P.S. Внесите значения полей и ширины самостоятельно, чтобы поля были ближе по вашему требованию.