您好我是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>
有没有办法更有效地做到这一点? 设计必须保持液体。 提前致谢
答案 0 :(得分:1)
最大。简化(好吧,我们也可以使用img标题)
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;
}