添加居中內容左側的html元素

Question

我的客戶希望擁有1000px寬的居中容器，並在左側放置廣告條。問題應該很明顯。我很努力地集中內容並同時放置廣告橫幅。當屏幕寬度爲1024px時，橫幅不應該可見。這可能嗎？怎麼樣？

這裏就是我的意思是：

Answer 1

使用這應該允許您隱藏廣告，而屏幕寬度小於1,024像素

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

關於旗幟的位置，爲什麼不你用「position：absolute」來放置它嗎？

Answer 2

中心容器的CSS應該是這樣的：

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

的橫幅廣告，應絕對定位，使其不影響中心容器。

如果屏幕寬度爲1024px，則可以使用Jquery確定以像素爲單位的屏幕寬度，然後使用它將廣告框的樣式參數更改爲display:none;。

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> 

這是假設你想有一個100像素寬的廣告與它和主要內容div之間有25px的邊距。基本上這只是使.container股利中心和position: relative，然後定位廣告相對於.container股利。一旦屏幕變得太小（廣告寬度+邊距+ 1000px），廣告就會隱藏起來。如果媒體查詢因任何原因失敗，您可能還想在body元素上添加overflow: hidden;以避免橫向滾動條。

絕對定位的div相對於其第一個父元素的左上角的位置爲position: relative（在這種情況下爲.container div），這就是廣告HTML位於容器內的原因。