Css 接线盒未正确对齐

Css 接线盒未正确对齐,css,html,Css,Html,我已经在JSFIDLE上测试了我的代码,它看起来不错,但由于某些原因,在站点上的框失去了对齐,为什么?它可以很好地装载前两个箱子 HTML: <div class="listingContainer"> <h2></h2> <div class="sectionListingAttributes"> <div class="col0">

我已经在JSFIDLE上测试了我的代码,它看起来不错,但由于某些原因,在站点上的框失去了对齐,为什么?它可以很好地装载前两个箱子

HTML:

<div class="listingContainer">
<h2></h2>
                    <div class="sectionListingAttributes">
                        <div class="col0">
                        <span class="name">Property type:</span>
                            <span class="value">Section</span><br/>
                                <span class="name">Price:</span>
                            <span class="value">To be sold by auction on 4 Dec</span><br/>
                                <span class="name">Land area:</span>
                            <span class="value">301m²</span>                                                                    
                        </div>
                    </div>  
                        <div class="description">
                            <span class="value text">

                            </span>
                        </div>

                        <div class="gallery">
                            <div class="flexslider loading">
                                <ul class="slides">
                                    {{ files:listing folder="10" }}
                                        <li><img src="{{ url:site }}files/large/{{ filename }}" alt="" /></li>
                                {{ /files:listing }}
                                </ul>
                            </div>
                        </div> 
                        </div><!-- listingAttributes End -->

                        <h2></h2>
                    <div class="sectionListingAttributes">
                        <div class="col0">
                        <span class="name">Property type:</span>
                            <span class="value">Section</span><br/>
                                <span class="name">Price:</span>
                            <span class="value">To be sold by auction on 4 Dec</span><br/>
                                <span class="name">Land area:</span>
                            <span class="value">333m²</span>                                                                    
                        </div>
                    </div>  
                        <div class="description">
                            <span class="value text">

                            </span>
                        </div>

                        <div class="gallery">
                            <div class="flexslider loading">
                                <ul class="slides">
                                    {{ files:listing folder="12" }}
                                        <li><img src="{{ url:site }}files/large/{{ filename }}" alt="" /></li>
                                {{ /files:listing }}
                                </ul>
                            </div>
                        </div> 
                        </div><!-- listingAttributes End -->
                        <h2></h2>
                    <div class="sectionListingAttributes">
                        <div class="col0">
                        <span class="name">Property type:</span>
                            <span class="value">Section</span><br/>
                                <span class="name">Price:</span>
                            <span class="value">To be sold by auction on 4 Dec</span><br/>
                                <span class="name">Land area:</span>
                            <span class="value">300m²</span>                                                                    
                        </div>
                    </div>  
                        <div class="description">
                            <span class="value text">
        </span>
                        </div>

                        <div class="gallery">
                            <div class="flexslider loading">
                                <ul class="slides">
                                    {{ files:listing folder="13" }}
                                        <li><img src="{{ url:site }}files/large/{{ filename }}" alt="" /></li>
                                {{ /files:listing }}
                                </ul>
                            </div>
                        </div> 
                        </div><!-- listingAttributes End -->

                        <h2></h2>
                    <div class="sectionListingAttributes">
                        <div class="col0">
                        <span class="name">Property type:</span>
                            <span class="value">Section</span><br/>
                                <span class="name">Price:</span>
                            <span class="value">To be sold by auction on 4 Dec</span><br/>
                                <span class="name">Land area:</span>
                            <span class="value">301m²</span>                                                                    
                        </div>
                    </div>  
                        <div class="description">
                            <span class="value text">
                            </span>
                        </div>

                        <div class="gallery">
                            <div class="flexslider loading">
                                <ul class="slides">
                                    {{ files:listing folder="14" }}
                                        <li><img src="{{ url:site }}files/large/{{ filename }}" alt="" /></li>
                                {{ /files:listing }}
                                </ul>
                            </div>
                        </div> 
                        </div><!-- listingAttributes End -->
                        </div> <!-- listingContainer End -->
.listingContainer{
    width:960px;
    height:100%;
}
.listingContainer h2{
    height:30px;
    width: 100%;
    margin: 10px 10px 0 10px;
}
.listingAttributes{
    width:100%;
    height:165px;
    margin: 15px 10px -5px 10px;
    border-bottom: 1px solid #FFB400;
}
.listingAttributes .col0, .col1{
    width:160px;
    height: 100%;
    margin:0 15px 0 0;
    float:left;
    display: inline-block;
}
.listingAttributes .col2{
    width:180px;
    height: 100%;
    margin:0 15px 0 0;
    float:left;
    display: inline-block;
}

.listingAttributes .col3{
    width:200px;
    height:100%;
    float:left;
    display: inline-block;
}
.listingAttributes .col4{
    width:200px;
    height:100%;
    float:left;
    display: inline-block;   
}
.listingAttributes .sectionListingAttributes, .name{
    font-weight: bold;
}

.sectionListingAttributes{
    width:100%;
    height:90px;
    margin: 15px 10px -5px 10px;
    border-bottom: 1px solid #FFB400;
}

.sectionListingAttributes .col0{
    width:250px;
    height: 100%;
    margin:0 15px 0 0;
    float:left;
    display: inline-block;
}

.description{
    width:930px;
    min-height: auto;
    max-height: 100%;
    overflow: auto;
    margin:0 0 0 10px;
    padding: 10px;
    border-bottom: 1px solid #FFB400;
}
.text, .value{
    font-size: 14px;
    text-align: left;
}

前两个包含在id
container
和class
w960
div
中,而其余的都不是


更新:根据您上面发布的代码,您有一行
大约在中间位置,我相信您希望关闭
元素,但是,该元素实际上是在
关闭之后关闭的,因此,两个关闭中的一个似乎是不正确的。

前两个包含在
div
中,id为
容器和class
w960
,而其余的都不是


更新:根据您上面发布的代码,您有一行
大约在中间位置,我相信您希望关闭
元素,但是,该元素实际上是在
关闭之后关闭的,因此,两次关闭中的一次似乎不正确。

给我们您的JSFIDLE的链接。当我粘贴您在JSFIDLE中发布的内容时,一切都不正常。一定缺少什么。请给我们指向您的JSFIDLE的链接。当我粘贴您在JSFIDLE中发布的内容时,一切都不正常。肯定少了什么,我同意。看一看Firebug的实时站点,它似乎就在画廊之后,一个额外的
将剩余的块放在容器外。可能是IDE的一个意外事故,它自动添加了额外的结束标记。@CAPN——当然是在OP不需要的地方添加了额外的结束标记。@CAPN在额外的div中的哪一行?@JessMcKenzie——添加了可能帮助您跟踪结束原因的更新。同意。看一看Firebug的实时站点,它似乎就在画廊之后,一个额外的
将剩余的块放在容器外。可能是IDE的一个意外事故,它自动添加了额外的结束标记。@CAPN——当然是在OP不需要的地方添加了额外的结束标记。@CAPN在额外的分区中的哪一行?@JessMcKenzie——添加了更新,可以帮助您跟踪结束的原因。