Редактирование HTML и CSS

Question

Итак, я последовал этому руководству по центрированию контента, это двухколоночный макет. Tutorial

Вот код для готового продукта:

https://jsfiddle.net/dppttuvn/

Моя проблема в том, как только я изменить #wrap ширину, а затем #main и #sidebar ширину, так что оно заполняет #wrap ширину, макет завершается. Как показано в этой ссылке:

https://jsfiddle.net/dwzvoarv/

Боковая панель не справа от основной части.

Может кто-нибудь коротко объяснить, почему это происходит, а также исправить?

Спасибо! (Я все еще изучаю веб-разработку явно lol)

Answer 1

Это из-за box-sizing. По умолчанию браузеры разделяют прописку и ширину, поэтому в основном общая ширина вашего элемента равна padding + width.

Допустим, что ваш элемент 1000px, с padding-left: 100px. То, что браузер будет делать по умолчанию, окрашивает элемент как 1100px, потому что дополнительное дополнение не входит в ширину (по умолчанию).

Добавить этот переключатель в верхней части таблицы стилей ...

* { 
    box-sizing: border-box; 
} 

... и что это делает, говоря каждый элемент на странице (вот что делает * селектор, без родительских селекторов) и устанавливает для него свойство box-sizing: border-box, что означает, что браузер теперь будет относиться к свойству width как фактической общей ширине.

Итак, если у вас есть элемент 1000px с padding-left: 100px, тогда общая ширина будет по-прежнему на самом деле равна 1000px, включая эту прокладку.

Answer 2

Вы должны учитывать заполнение при настройке ширины. Таким образом, чтобы получить 1000 пикселей, вы установите #main на 700px и #sidebar на 300px. Однако, так как есть 10px прокладка вокруг вас, вы должны вычесть эти пиксели 10px влево и 10px вправо. поэтому ваш #main должен быть 680px и #sidebar должен быть 280px. Запустите этот код в JS Fiddle, и вы увидите, что он работает.

  body, 
    html { 
     margin: 0; 
     padding: 0; 
     color: #000; 
     background: white; 
    } 

    #wrap { 
     width: 1000px; 
     margin: 0 auto; 
     background: #99c; 
    } 

    #header { 
     padding:5px 10px; 
     background:#ddd; 
    } 

    h1 { 
     margin:0; 
    } 

    #nav { 
     padding:5px 10px; 
     background:#c99; 
    } 

    #main { 
     float:left; 
     width:680px; 
     padding:10px; 
     background:#9c9; 
    } 

    h2 { 
     margin:0 0 1em; 
    } 

    #sidebar { 
     float:right; 
     width:280px; 
     padding:10px; 
     background:#99c; 
    } 

    #footer { 
     clear:both; 
     padding:5px 10px; 
     background:#cc9; 
    } 

    #footer p { 
     margin:0; 
    } 

    /* Navigation Bar */ 

    #nav ul { 
     margin: 0; 
     padding: 0; 
     list-style: none; 
    } 

    #nav li { 
     display: inline; 
     margin: 0; 
     padding: 0; 
    } 

Answer 3

Это потому, что фактический размер дивы является width + padding + border. Использование:

div{ 
    box-sizing:border-box; 
} 

Чтобы получить желаемое поведение. Подробнее на https://developer.mozilla.org/en/docs/Web/CSS/box-sizing

---

Изменено скрипку: https://jsfiddle.net/dwzvoarv/4/

Answer 4

Специально для вашего примера, вы можете это исправить путем изменения ширины обруча до 1040px:

#wrap { 
     width: 1040px; /*instead of 1000px*/ 
    } 

ширина обхвата = ширина основной ширины + колонки + обивки основных (справа и слева) + дополнения (справа и слева) = 700 + 300 + 20 + 20 = 1040px