将标题添加到已包含内容的div [英] Adding a caption to a div that already contains content

问题描述

我有一个200pxx200px的小滑块。然而，我真正喜欢的是在右上角有一个100像素×20像素的字幕框，里面有彩色背景和一个字。问题是，因为我已经有框中的内容（滑块），如果我尝试添加标题div，它不会位于现有内容的顶部，而是会扭曲200像素×200像素的大小。 / p>

HTML

 < div class =trigger> 
< div tabindex =0class =maincontent static> 
< div class =slider2> 
< img src =client9.jpgheight =200width =200/> 
< img src =client10.jpgheight =200width =200/> 
< img src =client11.jpgheight =200width =200/> 
< img src =client2.jpgheight =200width =200/> 
< / div> 
< / div> 
< / div> 
  

CSS

  .trigger {
 width：200px; 
 height：200px; 
} 
 
 .static {
 position：relative; 
 width：200px; 
 height：200px; 
 text-align：center; 
 font-size：0; 
 border-style：solid; 
 border-width：1px; 
 border-color：＃CCCCB2; 
 border-radius：5px; 
 
  

解决方案

试试这个：

添加到CSS

  .slider2 {position：relative; } 
 
 .caption-box {
 position：absolute; 
 right：0; 
 height：20px; 
 width：100px; 
背景颜色：红色; //更改为适合
颜色：#fff; //改为适合
 
  

您的HTML已更改：

 <！ - 添加了这个 - >标题< / div>< 
< div class =slider2> 
< img src =client9.jpgheight =200width =200/> 
< img src =client10.jpgheight =200width =200/> 
< img src =client11.jpgheight =200width =200/> 
< img src =client2.jpgheight =200width =200/> 
< / div> 
  

I have a small slider within a 200px by 200px div. However what I would really love is to have a 100px by 20px caption box in the top right hand corner with a colored background and one word inside it. The problem is, as I already have content in the box (the slider), if I try to add the caption div it does not sit over the top of the existing content, it instead distorts the size of the 200px by 200px div.

HTML

<div class="trigger">
    <div tabindex="0" class="maincontent static">
        <div class="slider2">
            <img src="client9.jpg" height="200" width="200" />
            <img src="client10.jpg" height="200" width="200" />
            <img src="client11.jpg" height="200" width="200" />
            <img src="client2.jpg" height="200" width="200" />
        </div>
    </div>
</div>

CSS

.trigger {
    width: 200px;
    height: 200px;
}

.static {
    position: relative;
    width: 200px;
    height: 200px;
    text-align: center;
    font-size: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #CCCCB2;
    border-radius: 5px; 
}

解决方案

Try this:

Add to CSS

.slider2 { position: relative; }

.caption-box {
  position: absolute;
  right: 0;
  height: 20px;
  width:100px;
  background-color: red; // change to suit
  color: #fff; // change to suit
}

Your HTML changed:

<div class="caption-box">Caption</div><!-- added this -->
<div class="slider2">
        <img src="client9.jpg" height="200" width="200" />
        <img src="client10.jpg" height="200" width="200" />
        <img src="client11.jpg" height="200" width="200" />
        <img src="client2.jpg" height="200" width="200" />
    </div>

这篇关于将标题添加到已包含内容的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！