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

我想在所有div下面顯示一些消息。但它是在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>

來源

2017-05-29 RHapani

爲什麼不把文本放在div後面而不是放在裏面？ – CoderPi

如果我把外面的div，那麼它會顯示div的右側 – RHapani

你能描繪一下你在油漆中真正想要的東西嗎？ – CoderPi

是否還好更改數據跨度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>

來源

2017-05-29 07:18:25

試試這個事情了。

你的事業部

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

在你的CSS，這樣做

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

這將增加 - 請注意這個文本中每div的上課「myDiv」之後。

來源

2017-05-29 07:11:03

刪除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然後設置span標籤的position到absolute並添加bottom 0，因此這將文字對齊至此jsFiddle。

來源

2017-05-29 07:11:48 frnt

我可以設置內容使用html而不是css？（內容：「A」;） – RHapani

是@RHapani檢查jsFiddle。 – frnt

謝謝....它的工作:) – RHapani

不要把信息放在你的<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>

來源

2017-05-29 07:14:21

儘量給顯示塊的跨度（.caption）：

.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; 
 
}

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

來源

2017-05-29 07:18:27 itacode

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

回答

相關問題