Question

我有这个网站：

在每张桌子下面，我想放一个＆＃34; +＆＃34;如在这个例子中

http://www.delumine.ch/produits-et-gamme.html

这是我的代码：

代码HTML：

 <div id="tabel_1">
   <p id="title_first">Qualité</p>
   <p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
   <div id="image_first"></div>


</div>

<div id="tabel_2">
   <p id="title_first">Qualité</p>
   <p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
   <div id="image_first"></div>


</div>

<div id="tabel_3">
   <p id="title_first">Qualité</p>
   <p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
   <div id="image_first"></div>


</div>

<div id="tabel_4">
   <p id="title_first">Qualité</p>
   <p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
   <div id="image_first"></div>


</div>

代码CSS：

  #tabel_1,#tabel_2,#tabel_3,#tabel_4{width:210px;height:540px;
        display:inline-block;
        background: #FFFFFF;
        vertical-align:top;
        border: 2px solid #264572;
        margin-left: 10px;}

我尝试在每个表下添加<p>+<p>但不起作用。

你能帮我解决这个问题吗？

提前致谢！

Answer 1

在div（margin-bottom）
使div定位为绝对值，以便包含+的p可以定位为绝对值
使用class bottom
给他们正确的尺寸和位置

＆＃13;

#tabel_1,#tabel_2,#tabel_3,#tabel_4{width:210px;height:540px;
    	display:inline-block;
    	background: #FFFFFF;
        vertical-align:top;
    	border: 2px solid #264572;
    	margin-left: 10px;
    margin-bottom: 50px;
    position: relative;
}

.bottom {
    position: absolute;
    top: 100%;
    left: 0px;
    right: 0px;
    width: 1em;
    margin: auto;
    font-size: 40px;
    font-weight: bolder;
}

＆＃13;

<div id="tabel_1">
   <p id="title_first">Qualité</p>
   <p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
   <div id="image_first"></div>
    <p class="bottom">+</p>
</div>

<div id="tabel_2">
   <p id="title_first">Qualité</p>
   <p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
   <div id="image_first"></div>
    <p class="bottom">+</p>
</div>

<div id="tabel_3">
   <p id="title_first">Qualité</p>
   <p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
   <div id="image_first"></div>
    <p class="bottom">+</p>
</div>

<div id="tabel_4">
   <p id="title_first">Qualité</p>
   <p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
   <div id="image_first"></div>
    <p class="bottom">+</p>
</div>

＆＃13;

Answer 2

你可能不会在键盘上使用+。查看http://fortawesome.github.io/Font-Awesome/等图标网站。通过font-awesome，它们具有不同的大小，并且它们非常易于使用。对于完整图标列表，请转到此处：http://fortawesome.github.io/Font-Awesome/icons/

Answer 3

我使用a：after选择器并将图标设置为背景。目前不在我的电脑上，所以没有例子抱歉。

如何在每张桌子下方加上“+”？

3 个答案: