Question

我已经在jsfiddle上测试了我的代码并且它看起来很好但是由于某种原因在live网站上，框已经失去对齐为什么？它加载前两个框

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

前两个包含在div内，标识为container，类w960，而其他所有内容都不包含在内。

更新：根据您在上面发布的代码，您的这一行</div>大约有一半，我相信您希望关闭<div class="sectionListingAttributes">元素，但是，在<div class="col0">关闭后，该元素实际上已关闭，因此两个关闭中的一个似乎是不正确的。

盒子没有对齐正确

1 个答案: