Убрать правое поле после позиционирования div по центру

0

Я положил свой главный div на 0 auto; и все еще есть правильный край, что я должен сделать, чтобы удалить его?

Вот пример скрипки: http://jsfiddle.net/sz3MD/9/

body  {
       margin: 0;
       padding: 0;
       background: #EEE;
       font: 10px/13px 'Lucida Sans',sans-serif;
    }

    .wrap {
       overflow: hidden;
       margin: 10px;
       background-color: #fff;
       margin: 0 auto;
    }

    .box {
       float: left;
       position: relative;
       width: 14%;


    }

    .boxInner img {
        background-color: black;
       width: 100%;
       display: block;
       -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
       -o-filter: grayscale(100%);

    }
  • 0
    это мило, но твоя скрипка не работает.
  • 0
    @MightyPork для меня это делает, я не знаю, что делать ...
Показать ещё 4 комментария
Теги:
margin

2 ответа

1
Лучший ответ

Пытаться

.wrap {
  margin: 0 0 0 auto;
}
.box {
  width: 14.25%;
}

Идея заключается в увеличении ширины окна и задании полей, чтобы он "появлялся" без правого края.

http://jsfiddle.net/sz3MD/10/

Поделиться
  • 0
    большое спасибо! это помогло и решило проблему
1

Решение @beautifulcoder - это хорошо, но не совсем корректно. Эта проблема не связана с полями .wrap или paddings, что "правое поле" действительно является частью содержимого .wrap.

В сетке 16 элементов, если вы вычисляете общую ширину в процентах от 7 элементов .box (каждая строка), каждая с 14% ширины, результат равен 98%, поэтому оставшаяся ширина общей ширины равна 2% что вы называете "правым краем", которое на самом деле является частью содержимого элемента.

Если вы используете 14.25%, все еще осталось немного свободного места, поэтому для решения проблемы вы должны использовать 14.285714286% (результат 100/7) вместо 14% или 14.25%. CSS позволяет использовать большие числа, подобные этому, без проблем, поэтому не беспокойтесь о размере.

Не используйте margin: 0 0 0 auto либо. Как я только что объяснил, это не проблема с маржой, поэтому вам не нужно это свойство. Вы даже можете удалить маркер свойства margin: 0 auto если вы не указали ширину, потому что, поскольку ширина обертки 100%, у нее никогда не будет полей.

Вот пример, демонстрирующий различия между

.wrap {
    width: 80%;
    margin: 0 0 0 auto;
}

.box {
    width: 14.25%;
}

а также

.wrap {
    width: 80%;
    margin: 0 auto;
}

.box {
    width: 14.285714286%;
}
Поделиться
  • 0
    Большое спасибо за ваше объяснение!

Ещё вопросы

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