如何使用html和css将图像置于文本下方和上方?

时间:2013-10-20 12:10:36

标签: html css html5 image

您好我是html&的新手css我有一个问题。我试图在另一个旁边的盒子中央显示4个图像。我目前正在使用表格但是在我的html&中提供了很多代码。 css:

的CSS:

/*box*/

#content2{
  margin: 30px 0;
  background: white;
  padding: 20px;
  clear: both;
  box-shadow: 0px 1px 1px #999;
  text-align: center;
  overflow:hidden;
} 

/*table*/
table{
 margin-right: auto;
 margin-left: auto;
 display: inline-block;
}
td,th{
 padding: 20px;
} 

然后转到很多html:

<div id="content2">
    <h4>Onze producten</h4>
    <table>
        <tr>
            <td><a href="../html/kleding.html"> Pika deken</a></td>
        </tr>
        <tr>
            <td><a href="../html/kleding.html"><img src="../images/baby1.jpg"></a></td>
        </tr>
        <tr>
            <td>€20</td>
        </tr>
    </table>
    <table>
    <tr>
        <td><a href="../html/kleding.html">School outfit</a></td>
    </tr>
    <tr>
        <td><a href="../html/kleding.html"><img src="../images/boy1.jpg"></a></td>
    </tr>
    <tr>
        <td>€140</td>
    </tr>
    </table>
    <table>
        <tr>
            <td><a href="../html/kleding.html">Bussines girl</a></td>
        </tr>
        <tr>
           <td><a href="../html/kleding.html"><img src="../images/girl2.jpg"></a></td>
        </tr>
        <tr>
            <td>€250</td>
        </tr>
    </table>
    <table>
        <tr>
            <td><a href="../html/kleding.html">Summer</a></td>
        </tr>
        <tr>
            <td><a href="../html/kleding.html"><img src="../images/girl1.jpg"></a></td>
        </tr>
        <tr>
            <td>€99.99</td>
        </tr>
    </table>
</div>

有没有办法更有效地做到这一点? 设计必须保持液体。 提前致谢

2 个答案:

答案 0 :(得分:1)

最大。简化(好吧,我们也可以使用img标题)

http://jsfiddle.net/EpyUb/

HTML

<div id="content2">
    <h4>Onze producten</h4>
    <div class="container">
        <div class="product">
            <a href="../html/kleding.html">School outfit</a>
            <a href="../html/kleding.html"><img src="../images/boy1.jpg"></a>
        </div>
        <div class="product">
            <a href="../html/kleding.html">School outfit</a>
            <a href="../html/kleding.html"><img src="../images/boy1.jpg"></a>
        </div>
        <div class="product">
            <a href="../html/kleding.html">School outfit</a>
            <a href="../html/kleding.html"><img src="../images/boy1.jpg"></a>
        </div>
        <div class="product">
            <a href="../html/kleding.html">School outfit</a>
            <a href="../html/kleding.html"><img src="../images/boy1.jpg"></a>
    </div>
    </div>
</div>

CSS

.product {display: inline-block;}
.product img {display: block;}

答案 1 :(得分:0)

您可以尝试这样的事情:

<div id="content2">
<h4>Onze producten</h4>
<div class="section">
    <a href="../html/kleding.html"> Pika deken</a>
    <a href="../html/kleding.html"><img src="../images/baby1.jpg" /></a>      
    €20
</div>
<div class="section">

    <a href="../html/kleding.html">School outfit</a>
    <a href="../html/kleding.html"><img src="../images/boy1.jpg" /></a>
        €140
    </div>
    <div class="section">          
        <a href="../html/kleding.html">Bussines girl</a>
        <a href="../html/kleding.html"><img src="../images/girl2.jpg" /></a>
            €250
    </div>
    <div class="section">
      <a href="../html/kleding.html">Summer</a>
        <a href="../html/kleding.html"><img src="../images/girl1.jpg" /></a>
          €99.99
   </div>      
</div>

和css:

 #content2{
  margin: 30px auto;
  background: white;
  padding: 20px;
  clear: both;
  box-shadow: 0px 1px 1px #999;
  text-align: center;
  overflow:hidden;
} 

.section {
    display: inline-block;
    margin: 0 10px;
}    

.section a {
   display: block; 
   padding-bottom: 10px; 
}

这里的例子: http://jsfiddle.net/thespacebean/xGqDE/