Ответ 1

Попытайтесь изменить свой контейнер div следующим образом:

#container { width: 960px; margin: 20px auto;}

:

#container {
  width: 960px;
  margin: 20px auto;
  position: absolute;
  left: 50%;
  margin-left: -480px; /* half the fixed width */
}

РЕДАКТИРОВАТЬ: Также вам нужно добавить это, чтобы заблокировать левую часть центрального div, когда размер вашего браузера превышает фиксированный 960px:

@media (max-width: 960px) {
    #container {
        left: 0;
        margin-left: -240px; /* Primary Sidebar width */
    }
}

ОБНОВЛЕНИЕ: Поскольку @media (max-width: 480px){} лучше решил проблему, а не 960px, я добавляю пример связанного кода с окончательным решением:

→ Код примера кода

Ответ 2

Обновление 2015-08-03 01:59 +0000

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

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

html, body {
    margin:0;
    padding:0;
}

@media (max-width: 480px) {
    #container {
        margin-left:-240px;
    }
}

@media (max-width: 960px) and (min-width:481px) {
    #container {
        margin-left:calc( (960px - 100%) / -2 );
    }
}

Оригинальный андерсервис

Чистый css. Значения "960" и "720" должны быть скорректированы для учета поля тела. Работает под Firefox, никаких гарантий в другом месте. Использование calc() для адаптивного отрицательного поля на основе ширины браузера.

/* fixed negative margin below 720px width */
@media (max-width: 720px) {
    #container {
        margin-left:-240px;
    }
}

/* adaptive negative margin vetween 720px and 960px width */
@media (max-width: 960px) and (min-width:721px) {
    #container {
        margin-left:calc( (960px - 100%) * -1 );
    }
}

Предварительный просмотр

p >

Ответ 3

Исправленное решение (на основе OP comment)

Решение @spenibus является лучшим, и я рекомендую это. Решение не работает с браузерами <= IE9 (IE9 только частично поддерживает его). Если вы хотите сделать его совместимым с браузером, я предлагаю использовать javascript для ручной установки прокрутки.

Fiddle: http://jsfiddle.net/dp7gwcn5/4/

$(function () {
    $(window).resize(function () {
        var width = $(window).width();
        if (width <= 960) {
            if(width <= 480) $(document).scrollLeft($('#content').offset().left);
            else $(document).scrollLeft((960-width) / 2);
        }
    });
});

Старое решение

Решение № 1 (Свиток: ничего не спрячь, просто цепляйтесь)

Если вы хотите, чтобы боковая панель все еще была доступна, прокручивая ее, но только сделайте левый край браузера левым краем основного содержимого #content. Затем манипулируйте прокруткой

Fiddle: http://jsfiddle.net/dp7gwcn5/. Скрипка позволит вам изменить размер окна предварительного просмотра, как только вы уменьшите его достаточно, чтобы скрыть вторичную боковую панель, окно привязывается к левому краю #content

$(function(){
    $(window).resize(function(){
        if ($(window).width() < 720) {
            $(document).scrollLeft($('#content').offset().left);
        }
    });
});

Примечание. Ширина 720 была задана на основе ширины, установленной на ваших боковых панелях и коннекторах, вы можете изменить ее для расчета на лету, если хотите.

Решение №2 (статическое: скрыть основную боковую панель)

Если вы хотите скрыть основную боковую панель, просто используйте медиа-запрос, чтобы скрыть основную боковую панель, когда размер вашего окна невелик.

Fiddle: http://jsfiddle.net/dp7gwcn5/1/

@media all and (max-width:720px) {
    #primary {
        display:none;
    }

    #container {
        width:720px;
    }
}

Решение №3 (динамическое: скрыть исходную боковую панель)

Решение №2 является статичным, и вы не можете его сделать, однако, если вы хотите вычислить ширину на лету и скрыть боковую панель, используйте script

Fiddle: http://jsfiddle.net/dp7gwcn5/2/

Script

$(function(){
    $(window).resize(function(){
        if ($(window).width() < 720) $('#container').addClass('small');
        else $('#container').removeClass('small');
    });
});

CSS

#container.small {
    width:720px;
}

#container.small #primary {
    display:none;
}

Мое предложение

Мое предложение состоит в том, чтобы использовать Решение № 1, если вы не хотите сделать его мобильным. Если вы хотите сделать мобильную совместимость, я предлагаю использовать Решение № 2 с помощью кнопки меню, чтобы показать свою основную боковую панель.

Примечание. Решение # 1 и решение №3 будут работать в большинстве браузеров. Решение № 2 не будет работать в браузерах, IE9

Ответ 4

Из того, что я вижу, этот шаблон использует маркер 0 auto в контейнере. Способ настройки поля, он центрирует "контейнер", который содержит все три столбца. Это означает, что в настоящее время контент сосредоточен, рассматривая каждый из трех столбцов как один большой.

Этот макет также не реагирует. Это означает, что он не адаптируется к большему или меньшему размеру браузера. Он имеет фиксированную ширину и высоту.

Простым решением является изменение единиц пикселя на%. Это создаст жидкую компоновку, которая будет легче адаптироваться к размеру браузера, поскольку измерения основаны на части размера окна, а не на фиксированном размере.

Например:

body {

width: 50%; } 

Независимо от размера окна браузера, размер тела будет составлять половину размера.

Если вы хотите, чтобы все три столбца были видны в одном и том же макете или просто были видны в браузере без прокрутки в сторону независимо от того, какое устройство или размер экрана, тогда вам нужно использовать медиа-запросы. Медиа-запросы - это свойства css, которые позволяют устанавливать определенные стили CSS для определенных разрешений или размеров экрана.

Например:

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}

@media screen and (max-width: 600px) {
    body {
        background-color: purple;
    }
}

В моем примере (хотя и очень грубом) фон тела будет фиолетовым до небольшого размера 600 пикселей. Затем он изменится до синего до 300px.

Подробнее о медиа-запросах вы можете узнать здесь: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Ответ 5

1 - удалите маржу из вашего CSS-кода.

2 - оберните весь ваш html в оболочку... все содержимое вашего тела

3 - Определите CSS для оболочки:

Это будет держать все вместе, в центре на странице.

#conatiner{
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

Ответ 6

.container {
    max-width: 960px !important;
    margin: 0px auto;
    position: relative;
}

он будет работать определенно.

Ответ 7

html, body
    {
       overflow: scroll !important;
       ms-overflow-y: auto; 
       float: none !important; 
       overflow-y: auto; 
       overflow-x: visible; 
    }  

попробуйте это в css или в script используйте

  function enableScrolling()
        {
            document.body.scroll = "yes"; 
            document.body.overflow="hidden";
        }

Ответ 8

@media(max-width : 960px)
{
  #primary{width:0;}
  #content{width:66.7%}
  #secondary{width:33.3%}
  #container{width:100%}
}

Надеюсь, это сработает для вас.

Ответ 9

Вы можете сделать это легко с помощью медиа-запросов

Внизу вашего CSS просто добавьте что-то вроде:

@media screen and (max-width : 960px) {

    #container {
        margin-left: -260px;
    }

}

Когда размер окна становится меньше 960px, он сдвигает контейнер влево по ширине левого столбца, оставляя его фиксированным с левой стороны в среднем столбце

Вот скрипка: https://jsfiddle.net/Locwv54q/

EDIT:

С добавлением переходов CSS, чтобы сделать вещи более плавными, вы можете использовать что-то вроде этого

В нижней части вашего CSS добавьте медиа-запрос:

@media (max-width : 960px) {

    #container {
        left: 460px;
        margin-left: -700px;
    }

}

Затем во время определения контейнера ранее в CSS используйте что-то вроде этого:

#container {
    position: absolute;
    left: 50%;
    width:960px;
    margin-left: -480px;
    margin-top: 20px;
    margin-bottom: 20px;
    -webkit-transition: margin-left 1s ease-in-out;
    -moz-transition: margin-left 1s ease-in-out;
    -o-transition: margin-left 1s ease-in-out;
    transition: margin-left 1s ease-in-out;
}

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

обновлен jsfiddle: https://jsfiddle.net/8L5n58jy/

EDIT2:

Теперь это должно работать как предполагалось

@media (max-width : 480px) {
#container {
    margin-left: -240px;
    left: 0px;
}
}

#container {
position: absolute;
width: 960px;
left: 50%;
margin-left: -480px;
margin-top: 20px;
margin-bottom: 20px;
}

Ответ 10

Я бы предложил всегда центрировать #container с помощью

position: absolute;
left: 50%;
transform:translateX(-50%);

Затем, когда он будет только соответствовать центральному столбцу и 1 столбцу (max-width: 720px), вы зафиксируете позицию:

@media (max-width: 720px) {
    #container {
        left:240px;
        transition: left 2s;//make it smooth 
    }
}

А плюс для сумасшедших вкладчиков будет добавлять переход для анимирования изменения transition: left 2s; (но думать о "нормальных" пользователях это может и не понадобиться)

fiddle

Ответ 11

Вы обязательно должны прочитать о платформе Twitter-Bootstrap, bro:

<div class="container">
    <div class="row>
        <div class="col-sm-3">
            <h2>Left</h2>
        </div>
        <div class="col-sm-6">
            <h2>Center</h2>
        </div>
        <div class="col-sm-3">
            <h2>Right</h3>
        </div>
    </div>
</div>

выполнит вашу работу, так как это RESPONSIVE. Просто говорю!

Ответ 12

Почему бы не использовать Bootstrap для создания столбцов и использовать col-sm- или col-xs-, чтобы вытащить средний контейнер на место

Вот пример на странице Bootstrap