html - 如何使绝对定位容器的内容包含在容器内

Question

我正在尝试使用 CSS 对此页面进行编码，但无法正确完成。

基本上我想要的是有 4 个广告容器，每个广告容器都有元素图像、一些文本和价格。 4 个广告容器应缩放至全宽和全高。

问题是当我将广告容器定义为绝对定位(并将它们定位如下)，然后将容器的内容定义为相对定位时，内容相对于视口(viewport)而不是它们各自的容器定位。

有人可以帮助更正 css，以便所有四个容器填满整个网页并使内容相对定位到各自的容器。即使其中一个容器被移除，其他三个 3 也应该占据相同的位置。这是一个图像表示:

HTML

<div id="ad1_wrapper">
    <div id="ad1_bgimg">
        <img src="<?php echo get_option('ad1_bgimg'); ?>" />
    </div>

    <div id="ad1_productimg">
        <img src="<?php echo get_option('ad1_productimg'); ?>" class="fadeInUp" />
    </div>

    <div id="ad1_tagline">
        <p class="option-tagline"><?php echo get_option('ad1_tagline'); ?></p>
    </div>              


    <div id="ad1_discount">
        <p class="option-discount"><?php echo get_option('ad1_discount'); ?></p>
    </div>

    <div id="ad1_offerdate" class="option-offerdate">
        <p><?php echo get_option('ad1_offerdate'); ?></p>
    </div>
</div>  

CSS

/*wrapper*/
#ad1_wrapper,  
#ad2_wrapper, 
#ad3_wrapper,
#ad4_wrapper { 
    width:50%; 
    height:50%; 
    position:absolutely; 
    top:0; 
    left:0;
}


#ad2_wrapper {top:0;left:50%;}
#ad3_wrapper {top:50%;left:0%;}
#ad4_wrapper {top:50%;left:50%;}


/*ad1 elements*/
    #ad1_bgimg, 
    #ad1_productimg, 
    #ad2_discount, 
    #ad4_punchline {
        position:relative; 
        top:0; 
        left:0;
    }

Answer 1

如果它应该是表格，则使用表格。