最后一个div倒下了

时间:2011-08-11 20:53:42

标签: css html internet-explorer-6 alignment

我正在使用ie6,这是我网站的代码

http://jsfiddle.net/Tebcv/

<div id="content-area"> 


<div class="panel-display panel-1col clear-block" id="welcome"> 
<div class="panel-panel panel-col"> 
<div><div class="panel-pane pane-custom pane-1" > 



<div class="pane-content"> 
<div class="welcome_message"><br /> 
<h3><img src="sites/all/themes/yghhzen/css/images/helpingpeoplehelpthemselves.png" alt="Helping people help themselves."/></h3><br /> 
<ul><div class="spacer"></div> 
    <li><a href="/dailynews/all"><strong>Learn</strong> more</a>. <a href="/supports/"><strong>Get</strong> support</a>.</li> 
    <li><a href="/support_group/add"><strong>Create</strong> a group</a>. <a href="/friendsblock/"><strong>Find</strong> friends</a>.</li> 
    <li class="last"><a href="/blogs/date/all"><strong>Share</strong> ideas</a>. <a href="/start"><strong>Make</strong> a difference</a>.<strong style="font-size:21px;">©</strong></li> 
</ul><br /> 
</div><br /><div class="grid"><div class="grid-m1"></div><a href="/start"><div class="grid-c1"> 
<div id="front_page_button1"> 
<br /> 
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/getting_started.png" /><br /> 
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/register_here.png" /><br /> 
</div> 
</div> 
</a> 
<div class="grid-m2"></div> 
<a href="/dailynews/all""> 
<div class="grid-c2"> 
<div id="front_page_button1"> 
<br /> 
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/read_news.png" /><br /> 
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/find_events.png" /><br /> 
</div> 
</div> 
</a> 
<div class="grid-m3"></div> 
<a href="/blogs/date/all""> 
<div class="grid-c3"> 
<div id="front_page_button1"> 
<br /> 
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/heading_stories.png" /><br /> 
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/start_blog.png" /><br /> 
</div> 
</div> 
</a> 
<div class="grid-m4"></div> 
<a href=/user/register> 
<div class="grid-c4"> 
<div id="front_page_button1"> 
<br /> 
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/heading_join.png" /><br /> 
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/find_support.png" /><br /> 
</div> 
</div> 
</a> 
<div class="grid-m5"></div> 
<a href=/user/register> 
<div class="grid-c5"> 
<div id="front_page_button1"> 
<br /> 
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/heading_start.png" /><br /> 
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/help_others.png" /><br /> 
</div> 
</div> 
</a> 
</div>  </div> 


</div> 
</div> 
</div> 
</div> 

</div> 

和相关的CSS代码

.grid {
width: 92%;
margin: -15px auto;
}

.grid-m1 {
float: left;
height: 1px;
}

.grid-c1 {
float: left;
width: 20%;
/*border-bottom-style: dotted;
border-bottom-color: #666;
border-bottom-width: 1px;*/
/*padding: 10px;*/
}

.grid-m2 {
float: left;
height: 1px;
}

.grid-c2 {
float: left;
width: 20%;
/*border-bottom-style: dotted;
border-bottom-color: #666;
border-bottom-width: 1px;*/
/*padding: 10px;*/
}

.grid-m3 {
float: left;
/*width: 2%;*/
height: 1px;
}

.grid-c3 {
float: left;
width: 20%;
/*padding: 10px;*/
}

.grid-m4 {
float: left;
/*width: 2%;*/
height: 1px;
}

.grid-c4 {
float: left;
width: 20%;
/*padding: 10px;*/
}

.grid-m5 {
float: left;
/*width: 2%;*/
height: 1px;
}

.grid-c5 {
float: left;
width: 20%;
/*padding: 10px;*/
}

当我将屏幕调整到较小的宽度时,最后一个div - grid-c5会下降。和其他一切(grid-c1-grid-c4)保持一致。我希望最后一个div不会掉下来,像其他div一样保持直线对齐

1 个答案:

答案 0 :(得分:0)

将整个东西包裹在div中并为其设置宽度。是应该把它保持在一行。祝你好运!