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 に答える