Question

你好我是html和css的新手。我想用一个部分来显示一些图像，但它给我一个奇怪的问题。当我在html中使用div作为我的部分时，我得到想要的结果，但是当我只使用＆lt;部分＆gt;我没有得到相同的结果。有人可以帮助我只使用我的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>

提前致谢！

Answer 1

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

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

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

display: block

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

Answer 2

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

html部分给出了不想要的结果

2 个答案: