如何在所有div下面显示文本

Question

我想在所有div下方显示一些消息。但它显示在div内。

我上传了我的css和html代码以及输出的快照。

.round .shape{
    background-size: 560px;
    background-position: 0px 2px;
    width: 66px;
    height: 69px;
    background-repeat: no-repeat;
    display: inline-block;
}
.img.shape {
    border: 1px solid #eee;
  }
  .img
  {
    margin-right: 52px;
    margin-top: 20px;
  }
  .shape
{
  background-image: url('../images/diamondshape.jpg'); 

}

<label for="ABC" class="round">
              <div class="img shape" ></div>
<span>A</span>
</label>

Answer 1

删除span tag并尝试使用伪选择器:before或:after，

   .round .shape{
    background-size: 560px;
    background-position: 0px 2px;
    width: 66px;
    height: 69px;
    background-repeat: no-repeat;
    display: inline-block;
    position:relative;
}
.img.shape {
    border: 1px solid #eee;
  }
  .img
  {
    margin-right: 52px;
    margin-top: 20px;
  }
.shape
{
  background-image: url('../images/diamondshape.jpg'); 
}
.shape:before{
  content:"A";
  position:absolute;
  left:0px;
  bottom:-20px;
}
.round:nth-of-type(2) > .shape:before{
  content:"B";
  position:absolute;
  left:0px;
  bottom:-20px;
}

<label for="ABC" class="round">
     <div class="img shape"></div>
</label>
<label for="ABC" class="round">
     <div class="img shape"></div>
</label>

如果您需要保留span tag，则将position的span标记设置为absolute并添加bottom 0，这样就可以将文本对齐到底部{{3 }}

Answer 2

将数据范围更改为div是否可以？如果你将该范围更改为div，那么它可以正常工作......试试这个

.round .shape{
    background-size: 560px;
    background-position: 0px 2px;
    width: 66px;
    height: 69px;
    background-repeat: no-repeat;
    display: inline-block;
}
.img.shape {
    border: 1px solid #eee;
  }
  .img
  {
    margin-right: 52px;
    margin-top: 20px;
  }
  .shape
{
  background-image: url('../images/diamondshape.jpg'); 

}

<label for="ABC" class="round">
              <div class="img shape" ></div>
<div>A</div>
</label>

Answer 3

尝试这样做。

你的分区

<div class="myDiv">Hello I am a div element.</div>

在你的CSS中，这样做

div.myDiv::after {
    content: " - Remember this";
}

这将在每个具有“myDiv”类的div之后添加-Remember此文本。

Answer 4

请勿将邮件放入<div>。如果您希望<span>标记内的消息显示在<div class="....."></div>下方，则<span>放在<div class = "image..."><div>

之外

<label for="ABC" class="round">
          <div class="img shape"> <img src= "C:\Users\XXXXXX\Downloads\IMG_20161008_175150_HDR_1475929397796.jpg"></img></div>
          <span>A</span>
</label>

Answer 5

尝试将显示块提供给范围（.caption）：

＆＃13;

＆＃13;

.round .shape{
    background-size: 560px;
    background-position: 0px 2px;
    width: 66px;
    height: 69px;
    background-repeat: no-repeat;
    display: inline-block;
}
.img.shape {
    border: 1px solid #eee;
  }
  .img
  {
    margin-right: 52px;
    margin-top: 20px;
  }
  .shape
{
  background-image: url('../images/diamondshape.jpg'); 

}
.caption {
display:block;
}

＆＃13;

<label for="ABC" class="round">
              <div class="img shape" ></div>
<span class="caption">A</span>
</label>

＆＃13;

＆＃13;

＆＃13;