CSS

Question

我有两个绝对定位的容器，如此......

HTML

<div class=title_container>
   <div class=title>Variable length title</div>
   <div class=title_bg></div>
</div>

<div class=description_container>
   <div class=description>Also variable length description</div>
   <div class=description_bg></div>
</div>

CSS

.title_container {
  position:absolute
}
  .title {
    position:relative; z-index:1;
    color:#FFF;
  }
  .title_bg {
    position:absolute; top:0; left:0;
    background:#0000FF;
    opacity:0.50;
    width:100%; height:100%;
  }

.description_container {
  position:absolute
}
  .description {
    position:relative; z-index:1;
    color:#FFF;
  }
  .description_bg {
    position:absolute; top:0; left:0;
    background:#0000FF;
    opacity:0.50;
    width:100%; height:100%;
  }

为了将透明背景宽度和高度与可变长度文本匹配，两个容器必须设置为绝对位置。

现在我需要设置两个容器之间的边距，但我不能只设置容器的顶部参数，因为文本长度可以变化，这意味着如果文本长于一行，透明背景将重叠。

在这种情况下，如何在两个容器之间设置固定的20px边距？

http://jsbin.com/IyUZUg/2/

Answer 1

在两个设置为绝对位置的容器周围添加包装器。然后你可以通过包装器控制你的绝对位置。然后将容器浮起（如果需要）并排堆叠。如果你想把它放在一起，请移除浮动。

    <div id="contentwrapper">
<div class=title_container>
   <div class=title>Variable length title</div>
   <div class=title_bg></div>
</div>

<div class=description_container>
   <div class=description>Also variable length description</div>
   <div class=description_bg></div>
</div>
</div>

CSS

#contentwrapper{
  position:absolute;
  top: 0;
    left: 0;
}

.title_container, .description_container{
    float: left;
}


.title_container{
   padding-right: 20px;
}
  .title {
    position:relative; z-index:1;
    color:#FFF;
  }
  .title_bg {
    position:absolute; top:0; left:0;
    background:#0000FF;
    opacity:0.50;
    width:100%; height:100%;
  }


  .description {
    position:relative; z-index:1;
    color:#FFF;
  }
  .description_bg {
    position:absolute; top:0; left:0;
    background:#0000FF; 
    opacity:0.50;
    width:100%; height:100%;
  }

小提琴

http://jsfiddle.net/hn2HY/9/

Answer 2

在这种情况下，我实际上可以使用位置相对，但是使用内联块技巧。

HTML

<div class=title_container>       
    <div class=title>
        Variable length title 
        Variable length title Variable length title 
        Variable length title Variable length title 
        Variable length title Variable length title 
        Variable length title Variable length title
    </div>
    <div class=title_bg></div>
</div>

<br>

<div class=description_container>
    <div class=description>Also variable length description</div>
    <div class=description_bg></div>
</div>

CSS

.title_container {
  position:relative;
  display:inline-block;
  margin-bottom:20px;
}
  .title {
    position:relative; z-index:1;
    color:#FFF;
    max-width:200px;
  }
  .title_bg {
    position:absolute; top:0; left:0;
    background:#0000FF;
    opacity:0.50;
    width:100%; height:100%;
  }

.description_container {
  position:relative;
  display:inline-block;
  margin-bottom:20px;
}
  .description {
    position:relative; z-index:1;
    color:#FFF;
  }
  .description_bg {
    position:absolute; top:0; left:0;
    background:#0000FF;
    opacity:0.50;
    width:100%; height:100%;
  }

http://jsbin.com/IyUZUg/2/

两个绝对定位元素之间的边距

2 个答案:

CSS

小提琴