css - Div 似乎找到了错误的关闭 div 标记，但语法似乎没问题。怎么了？

Question

Div 标签似乎结束于错误的结束标签，但我一定数过它们一百次。我不明白怎么了。我的老板说它需要在 Dreamweaver 中看起来不错，尽管我已经在 Mozilla、Safari 和 Chrome 中检查过了。问题是即使我使用的是 Sublime Text 2，一些 div 标签仍然显示它们以错误的结束 div 标签结束。所以它在 Dreamweaver 中看起来都搞砸了。就像我说的，我一定已经数了一百遍了，但我完全不知所措了。有没有人有什么建议？而且更重要的是，对于为什么在两个不同的文本编辑器中发生这种情况有什么解释吗？我正在做的事情可能真的很愚蠢，但我只是不明白它是什么......有帮助吗？第一个打开的 div 标签的问题最为明显。在向下的路上，它说它在底部结束标签处结束。但是在向上的路上它说结束标签的来源在中间的某个地方。我只是不明白......更新了所做的更改。现在它看起来好多了，但 div 标签仍然在错误的行上解析。 Dreamweaver 不再抛出错误，但它仍然以一种奇怪的方式解决。

        <style>

.landingWrapper{
    font-family: Arial, sans-serif;
    font-size: 14;
    width: 784px;
    display: block;
}

.blockIt {
    display: block;
}

.clearIt {
    clear: both;
    min-height: 50px;
}
.margins {
    margin-left: 35px;
    margin-right: 35px;
}

.introText {
    margin-bottom: 50px;
}

#listHeading {
    background: #eceeef;
    margin: 6px 13px;
}

#camera {
    width: 354px;
    height: 380px;
}

#camera, .listWrap {
    display: inline-block;
}

.listWrap {
    margin-left: 8px;
}

.benefitsList {
    width: 422px;
    float: left;
    margin-top: 0;
}

.cameraDiv {
    width: 354px;
    float: left;
    margin-top: 3px;
}

.heading {
    margin-left: 25px;
    width: 430px;
    height: 40px;
    background: #eceeef;
    vertical-align: middle;
}

.heading #listHeading{
    margin-top: 4px;
    padding-top: 12px;
    background: #eceeef;
    font-size: 16px;
    font-weight: bold;
    vertical-align: middle;
}


.ulBenefits li{
    margin-bottom: 7px;
    border-bottom: 1px solid #eceeef;
    font-size: 12px;
    font-family: Arial, sans-serif;
    list-style-type: disc;
    padding: 0;
}

.ulBenefits li p{
    margin: 5px 0;
    padding: 0;
}

#headingTwo {
    margin-top: 30px;
}

#secondaryText {
    margin-bottom: 25px;
    width: 714px;
}


.diagrams{
    margin-bottom: 15px;
    min-height: 50px;
    width: 713px;
    height: 195px;
}


.infoBox{
    border: 1px solid #eceeef;
    border-top: 10px solid #eceeef;
    width: 211px;
    display: block;
    margin-left: 35px;
    margin-top: 15px;
    float: left;
}

.infoBox p {
    margin-left: 6px;
    margin-right: 6px;
}

#walkieTalkieOne {
    width: 209px;
    height: 186;
}

#walkieTalkieTwo {
    width: 210px;
    height: 186;
}
#walkieTalkieThree {
    width: 211px;
    height: 186;
}

.infoHeader {
    font-weight: bold;
    font-size: 18px;
}

.infoDesc{
    margin-bottom: 15px;
}

.closer {
    display: block;
    margin-top: 50px;
    clear: both;
    position: relative;
    top: 25px;
}

#resellerButton {
    margin-bottom: 50px;
    clear: both;
    position: relative;
    top: 25px;
}

#resellButtLink{
    text-decoration: none;
    clear: both;
    position: relative;
    top: 25px;
}
</style>
<div class="landingWrapper">
    <div  class="blockIt">
        <img id="hero" alt="Your CAMCORDER. DIGITAL Sound. AFFORDABLE price." src="images/hero.jpg">
    </div>
    <div class="blockIt">
        <img id="headingOne" alt="Sony’s new UWP-D Series wireless mics deliver high-quality sound with digital audio processing." src="images/headerOne.jpg">
    </div>
    <div id="introText" class="margins">
        <p class="margins">Now you can get the digital sound quality you want at an affordable price. With more than 50 years of microphone innovation, Sony introduces the new UWP-D wireless microphone system. Just because your project is budget-driven doesn't mean you have to compromise on sound quality.</p>
        <p class="margins">Sony's new wireless mics are the ideal audio-for-video solution that will boost the performance of even entry-level camcorders. Choose from among three packages, any of which are well-suited for ENG and field production or any budget-conscious application requiring high-quality digital audio.</p>
    </div>
    <div class="clearIt blockIt listWrap benefitsList">
            <div class="heading">
                <p id="listHeading" class="margins">Key Benefits:</p>
            </div>
            <ul class="ulBenefits">
                <li><p>Wide range with up to 72 channels</p></li>
                <li><p>Three separate UHF frequency blocks available</p></li>
                <li><p>USB Portable Charger w/Lithium-Ion Battery and AC adapter</p></li>
                <li><p>Sturdy metal body construction</li>
                <li><p>Digital audio processing</li>
                <li><p>A DSP compander provides superb transient response performance</p></li>
                <li><p>Wide switching RF bandwidth with 3 UHF frequency blocks available</p></li>
                <li><p>True diversity receiver for stable reception</p></li>
                <li><p>Output audio gain control on receiver</p></li>
                <li><p>Headphone output on receiver</p></li>
                <li><p>Handheld TX includes interchangeable capsule design</p></li>
                <li><p>Mic or line input on both body-pack and plug-on transmitters</p></li>
                <li><p>Sony UWP/800 Series & Legacy Analog Wireless System compatibility</p></li>
            </ul>
        <div class="blockIt cameraDiv">
            <img id="camera" alt="Camera" src="images/camera.jpg">
        </div>
    </div>
    <div class="clearIt blockIt">
        <img id="headingTwo" alt="Digital Sound Innovation for Analog Systems" src="images/headerTwo.jpg">
    </div>
    <div id="secondaryText" class="blockIt">
        <p  class="margins">Sony knows that exceptional sound quality is the most important issue in wireless transmission. While conventional analog systems use companders to provide dynamic range, the sound quality and transient response performance are not without flaws.</p>
        <p  class="margins">That's why Sony has developed a digitally processed sound solution that uses DSP (digital signal processing). The UWP-D Series utilizes a DSP compander that achieves high quality digital sound, all at an affordable price. DSP optimizes the audio signal processing between the transmitter and receiver, providing superb transient response performance.</p>
        <p class="margins">With easy-to-use automatic channel setting mode, clear channel and active channel scan, IR sync and unprecedented frequency coverage, you will never look at sound the same way again.</p>
    </div>
    <div class="blockIt">
        <img class="margins diagrams" id="diagramOne" src="images/diagramOne.jpg">
    </div>
    <div class="blockIt">
        <img class="margins diagrams" id="diagramTwo" src="images/diagramTwo.jpg">
    </div>
    <div class="infoBox">
        <img id="walkieTalkieOne" alt="UWP-D11" src="images/walkieOne.jpg">
        <p class="infoHeader">UWP-D11</p>
        <p class="infoDesc">Is well suited for a wide range of applications, from news gathering and interviews to talk shows and conferences.</p>
    </div>
    <div class="infoBox">
        <img id="walkieTalkieTwo" alt="UWP-D12" src="images/walkieTwo.jpg">
        <p class="infoHeader">UWP-D12</p>
        <p class="infoDesc">Is widely used for interviews and news gathering and features a newly designed handheld transmitter.</p>
    </div>
    <div class="infoBox">
        <img id="walkieTalkieThree" alt="UWP-D16" src="images/walkieThree.jpg">
        <p class="infoHeader">UWP-D16</p>
        <p class="infoDesc">Is ideal for interviews and news gathering and features UTX-P03 plug-on bodypack transmitter.</p>
    </div>
    <p class="closer margins">Contact your Sony authorized reseller today and and discover the high-quality sound of digital audio processing.</p>
    <a id="resellButtLink" href="http://pro.sony.com/bbsc/ssr/product-UWPD11/42"><img id="resellerButton" class="margins" alt="Find a Reseller" src="images/button.jpg"></a>
</div>

Answer 1

如果浏览器呈现得很好，可能是因为它们知道您不必关闭 <p>或类似的东西，而您的文本编辑器不知道它。尝试关闭所有内容或更改编辑器配置中的文档类型。 Firefox 在查看代码时有一个很好的功能，它将有问题的标签涂成红色。

此外，您在 <div class="introText" class="margins"> 处有两个类声明