css - 盒子没有正确对齐

Question

我已经在 jsfiddle 上测试了我的代码，它看起来不错，但由于某种原因，在实时站点上，这些框失去了对齐，为什么？它可以很好地加载前两个框

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 -->

CSS：

.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;
}

Answer 1

前两个包含在divwith idcontainer和 classw960中，而其余的则不包含。

更新：根据您上面发布的代码，您有</div><!-- listingAttributes End -->大约一半的这条线，我相信您想要关闭<div class="sectionListingAttributes">元素，但是，该元素实际上是在关闭之后<div class="col0">关闭的，所以两个关闭之一似乎不正确。