Коробка-тень выпадает за пределы контейнера

0

У меня есть .container в котором есть n число (left-block и right-block) div. Но box-shadow элементов, плавающих с правой стороны, выходит за пределы контейнера.
Возможно ли принести box-shadow внутри .container вместо использования margin-right

DEMO

  • 0
    Почему бы вам не захотеть использовать margin-right?
  • 0
    @ChrisP Будет n элементов, плавающих справа. так что я не хочу использовать margin-right
Показать ещё 2 комментария
Теги:

4 ответа

2

Вы можете добавить некоторые дополнения в свой контейнер для компенсации.

.container {
  /* ... */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 10px;
}

border-box не позволит вашему добавленному дополнению влиять на вашу width: 100%.

http://jsbin.com/ayiziNa/14

2

Просто добавьте overflow:hidden для вашего .container:

.container {
    overflow:hidden;
}

Работает JSBin.

  • 0
    Хотя это будет «резать» тень, я не вижу другого чистого пути на самом деле ...
  • 0
    Я хочу сделать right side shadow
Показать ещё 2 комментария
1

Единственный способ добиться явно того, что вы просили, это добавить правильный запас.

.right-block {
    margin-right: 10px;
}
  • 0
    Хорошо, спасибо за помощь..
0

Если я правильно понимаю, вам это нужно

.right-block {box-shadow: -10px 10px 5px #888888;}
  • 0
    Я хочу правую и нижнюю боковую тень для всех элементов.
  • 0
    padding-right: 10px для .container не подходит для вас?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню