Question

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

基本上我想要的是拥有4个广告容器，每个容器都有项目图片，一些文字和价格。 4个广告容器应扩展到全宽和高度。

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

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

enter image description here

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

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

Answer 2

正如@somethinghere在评论中所说的那样。你的CSS有错误。其position: absolute;

要将div放在容器中，您可以执行以下操作。我已经在div上设置了边框，因此更容易看到。

＆＃13;

#ad1_wrapper {
  position: absolute;
  width: 500px;
  
}

.with-border{
  border: 1px solid #ccc;
  width: 49%; // I've put 49% here because of the borders. If you have no borders in your divs, you can set it to 50%.
  height: 100px;
  float: left;
}

＆＃13;

<div id="ad1_wrapper">
    <div class="with-border" id="ad1_bgimg">
        <img src="<?php echo get_option('ad1_bgimg'); ?>" />
    </div>

    <div class="with-border" id="ad1_productimg">
        <img src="<?php echo get_option('ad1_productimg'); ?>" class="fadeInUp" />
    </div>

    <div class="with-border" id="ad1_tagline">
        <p class="option-tagline"><?php echo get_option('ad1_tagline'); ?></p>
    </div>              


    <div class="with-border" id="ad1_discount">
        <p class="option-discount"><?php echo get_option('ad1_discount'); ?></p>
    </div>

    <div class="with-border" id="ad1_offerdate" class="option-offerdate">
        <p><?php echo get_option('ad1_offerdate'); ?></p>
    </div>
  
</div>

＆＃13;

这样，如果某些div消失了，下面的一个将取而代之。

Answer 3

首先，它是position: absolute;

其次，当元素不存在时，您已#ad 2,3和4 _wrapper获得CSS规则。

演示：

＆＃13;

.ad{
  
  /* Important stuff */
  position: absolute;
  height: 200px;
  width: 200px;
  
  /* Making it look nice */
  box-sizing: border-box;
  padding: 20px;
  
}
#ad1{
  top: 0;
  left: 0;
  background: red;
}
#ad2{
  top: 0;
  left: 200px;
  background: yellow;
}
#ad3{
  top: 200px;
  left: 0;
  background: blue;
}
#ad4{
  top: 200px;
  left: 200px;
  background: lime;
}
.text{
  /* Not important stuff */
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

＆＃13;

<div id='ad1' class='ad'>
  <p class='text'>Some Text Some Text</p>
</div>

<div id='ad2' class='ad'>
  <p class='text'>Some Text Some Text</p>
</div>

<div id='ad3' class='ad'>
  <p class='text'>Some Text Some Text</p>
</div>

<div id='ad4' class='ad'>
  <p class='text'>Some Text Some Text</p>
</div>

＆＃13;

Answer 4

请看我的小提琴here。

四个面板将根据#container元素的大小重新调整大小。虽然内部属性（标语等）将相对于容器定位。

<强> HTML

<div id="container">
  <div id="ad1_wrapper">
    <div class="innerWrapper">
      <div id="ad1_productimg" class="productImg"><img src="#" class="fadeInUp" /></div>
      <div id="ad1_tagline" class="tagline"><p class="option-tagline">Tagline</p></div>  
      <div id="ad1_discount" class="discount"><p class="option-discount">Discount</p></div>
      <div id="ad1_offerdate" class="optionOfferdate"><p>Offerdate</p></div>
    </div>
  </div>
  <div id="ad2_wrapper">
    <div class="innerWrapper">
      <div id="ad1_productimg" class="productImg"><img src="#" class="fadeInUp" /></div>
      <div id="ad1_tagline" class="tagline"><p class="option-tagline">Tagline</p></div>  
      <div id="ad1_discount" class="discount"><p class="option-discount">Discount</p></div>
      <div id="ad1_offerdate" class="optionOfferdate"><p>Offerdate</p></div>
    </div>
  </div>
  <div id="ad3_wrapper">
    <div class="innerWrapper">
      <div id="ad1_productimg" class="productImg"><img src="#" class="fadeInUp" /></div>
      <div id="ad1_tagline" class="tagline"><p class="option-tagline">Tagline</p></div>  
      <div id="ad1_discount" class="discount"><p class="option-discount">Discount</p></div>
      <div id="ad1_offerdate" class="optionOfferdate"><p>Offerdate</p></div>
    </div>
  </div>
  <div id="ad4_wrapper">
    <div class="innerWrapper">
      <div id="ad1_productimg" class="productImg"><img src="#" class="fadeInUp" /></div>
      <div id="ad1_tagline" class="tagline"><p class="option-tagline">Tagline</p></div>  
      <div id="ad1_discount" class="discount"><p class="option-discount">Discount</p></div>
      <div id="ad1_offerdate" class="optionOfferdate"><p>Offerdate</p></div>
    </div>
  </div>
</div>

<强> CSS

/* Container */
* { box-sizing: border-box; }

#container {
    position: relative;
    height: 600px;
}

/*wrapper*/
#ad1_wrapper,
#ad2_wrapper,
#ad3_wrapper,
#ad4_wrapper {
    width:50%;height:50%; position:absolute; top:0; left:0;
    border: 1px solid #ddd;
}

#ad2_wrapper {top:0;left:50%;background: red;}
#ad3_wrapper {top:50%;left:0%;background: green;}
#ad4_wrapper {top:50%;left:50%;background: purple;}

#container .innerWrapper {
    height: 100%;
    border: 1px solid red;
    position: relative;
}

.productImg,
.tagline,
.discount,
.optionOfferdate {
    position: absolute;
}

.productImg {bottom: 0px; right: 0px;}
.tagline {top: 20px; left: 20px;}
.discount {top: 40px; left: 40px;}
.optionOfferdate {bottom: 0px; left: 30px;}

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

4 个答案: