html - 在居中内容左侧添加 html 元素

Question

我的客户想要一个 1000 像素宽度的居中容器，左侧有一个广告横幅。问题应该很明显。我很难将内容居中并同时放置广告横幅。当屏幕宽度为 1024 像素时，横幅不应可见。这可能吗？如何？

这就是我的意思：

Answer 1

使用它应该允许您在屏幕宽度小于 1024 像素时隐藏横幅

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

关于横幅位置，为什么不使用“位置：绝对”来放置它？

Answer 2

这就是我的做法：

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 之间有 25 像素的边距。基本上这只是使.containerdiv 居中，position: relative然后相对于.containerdiv 定位广告。一旦屏幕变得太小（广告宽度 + 边距 + 1000 像素），广告就会隐藏。如果媒体查询由于某种原因失败，您可能还想添加元素以避免水平滚动overflow: hidden;条。body

绝对定位的 div 相对于其第一个父元素的左上角position: relative（在本例中为.containerdiv）定位，这就是广告 HTML 位于容器内部的原因。

Answer 3

中心容器的 CSS 应该是这样的：

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

广告横幅应绝对定位，以免影响中心容器。

您可以使用 Jquery 确定屏幕宽度（以像素为单位），然后使用它将您的广告框的样式参数更改为屏幕宽度display:none;是否为 1024 像素。

Answer 4

有几种不同的方法可以将广告放置在您的容器旁边。

方法一：

假设您知道广告的宽度，您可以使用一个额外的容器来包装您的内容容器和广告。额外容器的宽度将是内容容器的宽度加上广告宽度的两倍。这让您有空间在内容容器的左侧和右侧放置广告。

方法二：

使用position: absolute或position: fixed定位广告。这样做的问题是调整浏览器的宽度不会适当地改变广告相对于您的内容容器的位置。但是，这可能比方法 1 更容易。

关于隐藏广告的问题，您可以使用CSS 媒体查询。