0

您好，我是 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>

有没有办法更有效地做到这一点？设计必须保持流动性。提前致谢

4

2 回答 2

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;}
于 2013-10-20T12:29:59.607 回答
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/

于 2013-10-20T12:31:54.040 回答