html – Float在Internet Explorer 8中不起作用

发布时间：2020-12-14 18:48:10 所属栏目：资源来源：网络整理

导读：在我的网站 Family Law Act,我试图让两个水平行的图片/配置文件堆叠在一起.第一行是一个城市,最下面一行是另一个城市.顶行正确浮动,但正如您所见,底行不会浮动.而是将照片垂直堆叠在彼此之上. 它在Chrome和Firefox中运行良好,但在Internet Explorer 8中存在

在我的网站 Family Law Act,我试图让两个水平行的图片/配置文件堆叠在一起.第一行是一个城市,最下面一行是另一个城市.顶行正确浮动,但正如您所见,底行不会浮动.而是将照片垂直堆叠在彼此之上.

它在Chrome和Firefox中运行良好,但在Internet Explorer 8中存在这个问题.

有任何想法吗？

CSS

#Vancouver {float:left; display:block; }
.vancouver {float: left; padding-right: 10px;}
#New_York {clear:both; float:left; display:block;  margin-top:20px; }
.newyork {float: left; padding-right: 10px; }

HTML

<div id="Vancouver">
<div class="headVan">Vancouver</div>
<div class="vancouver a">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/1.png" alt ="test" /></li>
<li>Tom JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver b">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver c">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver d">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver e">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

</div>

<div id="New_York">
<div class"headvic">New York</div>
<div class="newyork a">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/3.png" alt ="test" /></li>
<li>Nat JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>
<div class="newyork b">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/4.png" alt ="test" /></li>
<li>Jed JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>
</div>

解决方法

当包含div具有宽度时,浮动通常最有效

在你的纽约div尝试给它一个宽度(你的内容区域的宽度 – 无论它可能是什么)

#New_York {
    clear: both;
    float: left;
    display: block;
    margin-top: 20 px;
    width: XXXXX px;
}

我也会把它添加到你的温哥华div.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!