Question

浮动百分比宽度div与自动高度时有一个奇怪的错误。较小的div不是左边有较大div的级别，它在所有浏览器中都低了85px。我可以通过将边距更改为负高度来修复它，但所有浏览器的效果都不同，如果它在Firefox中完美，Chrome和IE中存在细微差距，这是不行的。

样本

.wrap-outer {
  position: relative;
  float: left;
  width: 100%;
}
.wrap-inner {
  position: relative;
  float: left;
  width: 92%;
  margin: -100px 4% 0px 4%;
  clear: both;
}

.large-top {
  position: relative;
  float: left;
  width: 60%;
  height: auto;
  background: #e6f0d7;
  margin: 0 0 0 0;
  padding: 10px 0px 10px 0px;
  border-radius: 15px 15px 0px 0px;
}
.large-middle {
  position: relative;
  float: left;
  width: 60%;
  height: auto;
  background: #9ea790;
  margin: 0 0 0 0;
  padding: 5px 0px 5px 0px;
}
.large-bottom {
  position: relative;
  float: left;
  width: 60%;
  height: auto;
  background: #f8ffee;
  margin: 0 0 0 0;
  padding: 5px 0px 80px 0px;
}

.small-top {
  position: relative;
  float: left;
  width: 39%;
  height: auto;
  background: #e6f0d7;
  margin: 0 0 0 1%;
  padding: 10px 0px 10px 0px;
  border-radius: 15px 15px 0px 0px;
}
.small-middle {
  position: relative;
  float: left;
  width: 39%;
  height: auto;
  background: #9ea790;
  margin: 0 0 0 1%;
  padding: 5px 0px 5px 0px;
}
.small-bottom {
  position: relative;
  float: left;
  width: 39%;
  height: auto;
  background: #f8ffee;
  margin: 0 0 0 1%;
  padding: 5px 0px 40px 0px;
}

<div class="wrap-outer">
  <div class="wrap-inner">

    <div class="large-top"></div>
    <div class="large-middle"></div>
    <div class="large-bottom"></div>

    <div class="small-top"></div>
    <div class="small-middle"></div>
    <div class="small-bottom"></div>

  </div>
</div

我删除了填充，因为我的一些填充加起来高达85px，但没有区别。此外，我只将这些div放在测试页面中，没有别的东西，它仍然是相同的。其他人有这个问题吗？

Answer 1

CSS按设计工作。您的花车按以下方式放置（请参阅9.5.1 "Positioning the float"中的CSS 2.1 Specification部分）：

<div class="large-top">浮动到左侧，占用可用宽度的60％。
然后<div class="large-middle">来了，想要向左浮动。它不适合，因为它需要60％的宽度，只有40％可用。因此它被置于先前的<div>。
然后<div class="large-bottom">来了，想要向左浮动。它不适合，因为它需要60％的宽度，只有40％可用。因此它被置于先前的<div>。
然后<div class="small-top">来了，想要浮动到左边并且它适合，因为它需要40％的宽度，这是可用的。 结果是<div class="small-top">的顶部与<div class="large-bottom">的顶部对齐。关键规则是

浮动框的外部顶部不得高于源文档中较早元素生成的任何块或浮动框的外部顶部。

因此<div class="small-top">的顶部不能高于<div class="large-bottom">的顶部。
然后<div class="small-middle">来了，想要浮到左边;由于<div class="large-bottom">和<div class="small-top">的高度，它位于<div class="small-top">下方。
同样适用于<div class="small-bottom">。

Answer 2

想出来。我应该在段周围使用容器，然后将段设置为100％宽度。

以下工作代码;

<!doctype html>
<html>
<head>
<style>

.wrap-outer {
position: relative;
float: left;
width: 100%;
}
.wrap-inner {
position: relative;
float: left;
width: 92%;
margin: 0px 4% 0px 4%;
}

.wrap-small {position:relative; float:left; width:39%; margin-left:1%; height:100%;}
.wrap-large {position:relative; float:left; width:60%; height:100%;}

.large-top {
position: relative;
float: left;
width: 100%;
background: #e6f0d7;
margin: 0 0 0 0;
padding: 10px 0px 10px 0px;
border-radius: 15px 15px 0px 0px;
}
.large-middle {
position: relative;
float: left;
width: 100%;
background: #9ea790;
margin: 0 0 0 0;
padding: 5px 0px 5px 0px;
}
.large-bottom {
position: relative;
float: left;
width: 100%;
background: #f8ffee;
margin: 0 0 0 0;
padding: 5px 0px 80px 0px;
}

.small-top {
position: relative;
float: left;
width: 100%;
background: #e6f0d7;
margin: 0 0 0 0;
padding: 10px 0px 10px 0px;
border-radius: 15px 15px 0px 0px;
}
.small-middle {
position: relative;
float: left;
width: 100%;
background: #9ea790;
margin: 0 0 0 0;
padding: 5px 0px 5px 0px;
}
.small-bottom {
position: relative;
float: left;
width: 100%;
background: #f8ffee;
margin: 0 0 0 0;
padding: 5px 0px 40px 0px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>


<div class="wrap-outer">
<div class="wrap-inner">

<div class="wrap-large">
<div class="large-top">dsff</div>
<div class="large-middle">sfsfd</div>
<div class="large-bottom">sdffds</div>
</div>

<div class="wrap-small">
<div class="small-top">sfdsd</div>
<div class="small-middle">sdfdsf</div>
<div class="small-bottom">sfds</div>
</div>

</div>
</div>

</body>
</html>

百分比宽度＆amp;自动高度div浮动bug

2 个答案: