html - 我怎样才能在每个表下面放一个 "+"？

Question

我有这个网站:

http://dl.dg-site.com/produits-game/

在这个例子中，我想在每个表格下面放一个“+”

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

这是我的代码:

http://jsfiddle.net/xcn8fg94/

代码 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

1. 在 div 下方留出边距(margin-bottom)
2. 将div设为绝对定位，这样包含+号的p就可以绝对定位
3. 创建 p ，类为 bottom
4. 给他们正确的尺寸和位置

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

<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>