Добавить элемент html влево от центрированного содержимого

Question

Мой клиент хочет иметь контейнер с центрированной шириной 1000 пикселей с рекламным баннером слева. Проблема должна быть очевидной. Я борюсь с центрированием контента и размещением рекламного баннера одновременно. Когда ширина экрана составляет 1024 пикселя, баннер не должен быть видимым. Это возможно? Как?

Вот что я имею в виду:

Answer 1

Используя это позволит вам скрыть баннер, а ширина экрана меньше 1024px

@media only screen and (max-width : 1024px) { 
    .yourBannerClass { display:none; } 
} 

Что касается позиции баннера, почему Дон» Вы используете «позицию: абсолютное», чтобы поместить его?

Answer 2

CSS центре контейнера должен быть как:

.center 
    { 
    width: 1000px; 
    margin:auto; 
    } 

Объявление баннер должен быть абсолютно позиционирован так, чтобы она не влияет на центр контейнера.

Вы можете использовать Jquery для определения ширины экрана в пикселях, а затем использовать его для изменения параметра стиля для вашего рекламного блока до display:none;, если ширина экрана составляет 1024 пикселя.

Answer 3

Существует несколько способов разместить объявление рядом с вашим контейнером.

Метод 1:

Предполагая, что вы знаете, как широка объявление будет, вы могли бы сделать это с дополнительным контейнером, который охватывает как ваш контейнер содержание и объявлений. Дополнительный контейнер будет иметь ширину контейнера содержимого плюс в два раза больше ширины объявления. Это оставляет вам место для размещения рекламы на левой и правой сторонах вашего контейнера контента.

Метод 2:

Используйте position: absolute или position: fixed для размещения объявлений. Проблема заключается в том, что изменение размера браузера не приведет к правильному изменению позиции объявления относительно вашего контейнера контента. Однако это, вероятно, проще, чем метод 1.

Что касается проблемы со скрытием рекламы, вы можете использовать CSS media queries.

Answer 4

Это, как я хотел бы сделать это:

CSS:

.container { 
    width: 1000px; 
    margin: 0 auto; 
    position: relative; 
} 
.ad { 
    width: 100px; 
    position: absolute; 
    left: -125px; 
    top: 0; 
} 
@media only screen and (max-width: 1125px) { 
    .ad { 
     display: none; 
} 

HTML:

<div class="container"> 
    container content here 
    <div class="ad"> 
     ad code here 
    </div> 
</div> 

Это предполагает, что вы хотите 100px широкого объявления с 25px margin между ним и основным содержимым div. В основном это просто делает .container div центрированным и position: relative, а затем позиционирует объявление относительно деления .container. Объявление скрывается, когда экран становится слишком маленьким (ширина объявления + маржа + 1000 пикселей).Вы также можете добавить overflow: hidden; в элемент body, чтобы избежать горизонтальных полос прокрутки, если запрос по запросу не работает по какой-либо причине.

Абсолютно расположенные divs расположены относительно верхнего левого угла их первого родительского элемента с position: relative (в данном случае .container div), поэтому объявление HTML находится внутри контейнера.