Css 接线盒未正确对齐
我已经在JSFIDLE上测试了我的代码,它看起来不错,但由于某些原因,在站点上的框失去了对齐,为什么?它可以很好地装载前两个箱子 HTML:Css 接线盒未正确对齐,css,html,Css,Html,我已经在JSFIDLE上测试了我的代码,它看起来不错,但由于某些原因,在站点上的框失去了对齐,为什么?它可以很好地装载前两个箱子 HTML: <div class="listingContainer"> <h2></h2> <div class="sectionListingAttributes"> <div class="col0">
<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
和classw960
的div
中,而其余的都不是
更新:根据您上面发布的代码,您有一行
大约在中间位置,我相信您希望关闭
元素,但是,该元素实际上是在
关闭之后关闭的,因此,两个关闭中的一个似乎是不正确的。前两个包含在div
中,id为容器和classw960
,而其余的都不是
更新:根据您上面发布的代码,您有一行
大约在中间位置,我相信您希望关闭
元素,但是,该元素实际上是在
关闭之后关闭的,因此,两次关闭中的一次似乎不正确。给我们您的JSFIDLE的链接。当我粘贴您在JSFIDLE中发布的内容时,一切都不正常。一定缺少什么。请给我们指向您的JSFIDLE的链接。当我粘贴您在JSFIDLE中发布的内容时,一切都不正常。肯定少了什么,我同意。看一看Firebug的实时站点,它似乎就在画廊之后,一个额外的
将剩余的块放在容器外。可能是IDE的一个意外事故,它自动添加了额外的结束标记。@CAPN——当然是在OP不需要的地方添加了额外的结束标记。@CAPN在额外的div中的哪一行?@JessMcKenzie——添加了可能帮助您跟踪结束原因的更新。同意。看一看Firebug的实时站点,它似乎就在画廊之后,一个额外的
将剩余的块放在容器外。可能是IDE的一个意外事故,它自动添加了额外的结束标记。@CAPN——当然是在OP不需要的地方添加了额外的结束标记。@CAPN在额外的分区中的哪一行?@JessMcKenzie——添加了更新,可以帮助您跟踪结束的原因。