0

您好，我是 html 和 css 的新手。我想使用一个部分来显示一些图像，但它给了我一个奇怪的问题。当我在 html 中为我的部分使用 div 时，我得到了想要的结果，但是当我只使用 <section> 时，我没有得到相同的结果。有人可以帮助我只使用我的 html 中的部分而不是 div 吗？这是我的CSS代码：

#content2{
 margin: 30px 0;
 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 {
 color: orange;
 font-weight:bold;
 font-size: 1.5em;
 line-height: 1em;
 text-align: center;
 display: block;
}

.section p {
 color: black;
 font-weight:bold;
 font-size: 1.5em;
 line-height: 1em;
 text-align: center;
 display: block;
 padding-bottom: 2em;
}

我的 html 看起来像这样：

<div id="content2">
    <h4>Onze producten</h4>
    <div class="section">
        <a href="../html/kleding.html#Pika"> Pika deken</a>
        <a href="../html/kleding.html#Pika"><img src="../images/NB1.jpg" /></a>
        <p>€19.99</p>
    </div>
    <div class="section">
        <a href="../html/kleding.html#City">City boy</a>
        <a href="../html/kleding.html#City"><img src="../images/peuter1.jpg" /></a>
        <p>249.99</p>
    </div>
    <div class="section">
        <a href="../html/kleding.html#Classy">Classy girl</a>
        <a href="../html/kleding.html#Classy"><img src="../images/peuter9.jpg" /></a>
        <p>€244.99</p>
    </div>
     <div class="section">
        <a href="../html/kleding.html#Outdoors">Outdoors</a>
        <a href="../html/kleding.html#Outdoors"><img src="../images/girl1.jpg" /></a>
        <p>€129.99</p>
    </div>

</div>

提前致谢！

4

2 回答 2

0

首先，确保您<!DOCTYPE html>在页面顶部指定，以表明正在使用 HTML5（主要用于 IE）

其次，<section>is 不是块级元素，例如 a<div>是块级元素。

要解决此问题，请将其添加到您的.sectionCSS

display: block

这将导致 a<section>表现得像 a<div>并且应该解决您的问题。

于 2013-10-28T12:31:02.700 回答
-1

确保您<!DOCTYPE html>在 HTML 文档中使用。

于 2013-10-28T12:27:08.070 回答