Div似乎找到了错误的结束div标签,但语法似乎很好。怎么了?

时间:2014-03-26 22:43:52

标签: css html

Div标签似乎在错误的结尾标签上结束,但我必须将它们计数一百次。我不明白什么是错的。我的老板说,即使我已经在Mozilla,Safari和Chrome中检查过它,它仍然需要在Dreamweaver中看起来很好。问题是即使我使用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>

3 个答案:

答案 0 :(得分:2)

第204行的

<div id="blockIt secondaryText">
我认为应该是 <div class="blockIt" id="secondaryText">

另外,第174行

<div class="introText" class="margins">
应该是 <div class="introText margins">

第186行和第187行未关闭<p>标记

答案 1 :(得分:2)

如果浏览器渲染得很好可能是因为他们知道你不必关闭<p>或类似的东西,而你的文本编辑器也不知道它。尝试关闭所有内容或更改编辑器配置中的doctype。 Firefox在查看代码时具有很好的功能,它会以红色标记有问题的标记。

此外,您在<div class="introText" class="margins">

处有两个班级声明

答案 2 :(得分:0)

您没有发布您的编码。如果您使用严格的html编码,则还必须关闭img标签[ex:<img src="" alt="" />]。我在你的更新中看到你关闭了所有的p标签。也许这就是剩下的事了。