0

jsfiddleでコードをテストしましたが、問題ないように見えますが、ライブサイトで何らかの理由で、ボックスの配置が失われました。なぜですか。最初の2つのボックスを正常にロードします

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

1 に答える 1

3

最初の2つはdivwithidcontainerとclass内に含まれてw960いますが、残りはすべて含まれていません。

更新：上記のコードに基づいて</div><!-- listingAttributes End -->、要素を閉じたいと思う約半分の行があります<div class="sectionListingAttributes">が、その要素は実際には閉じられた直後に閉じられて<div class="col0">いるため、2つの閉じのうちの1つは間違っている。

于 2012-11-13T19:47:34.657 に答える