gpt4 book ai didi

html - CSS float 对齐不下降

转载 作者:太空宇宙 更新时间:2023-11-04 14:09:57 24 4
gpt4 key购买 nike

我似乎无法让我的 float 按照我期望的方式运行。我正在尝试创建一个四面板设置,例如 Windows Logo 。问题是,第四个面板一直与顶行的最后一个 block 齐平。我在 IE7 的 IIS6 中运行它。它在下面的 fiddle 以及 IIS7 上运行良好,但我无法在 IIS6 中获得相同的行为。 http://jsfiddle.net/9GCrm/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#replist
{
background-color:blue;
float:left;
height:250px;
width:300px;
margin-right:10px;
margin-bottom:10px;
padding:3px;
}
#repedits
{
background-color:blue;
float:left;
height:250px;
width:300px;
margin-bottom:10px;
padding:3px;
}

#mgrslist
{
background-color:blue;
height:250px;
width:300px;
clear:both;
float:left;
margin-right:10px;
padding:3px;
}
#importdiv
{
background-color:blue;
float:left;
height:250px;
width:300px;
padding:3px;
}
</style>
</head>
<body>
<div id="admindiv">
<div id="replist">

</div>
<div id="repedits">

</div>
<div id="mgrslist">

</div>
<div id="importdiv">

</div>
</div>
</body>
</html>

最佳答案

只需删除 clear:both;来自 #mgrslist而是将其添加为单独的类,例如:

<div id="admindiv">
<div id="replist"></div>
<div id="repedits"></div>
<div class="clr"></div>
<div id="mgrslist"></div>
<div id="importdiv"></div>
</div>

demo here

为什么有效? 因为 <div class="clr"></div>将清除它之前所有 div 的 float 但是将它添加到类中只会 clear:float对于那个特定的类(class),而不是那个类(class)之前的 pre-divs!

此外,现在 pseudo classes喜欢:before:after存在,最好将它们用于 clear正在 float 。
阅读此线程以更好地理解它: replace the clear:both with pseudo class

关于html - CSS float 对齐不下降,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20858398/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com