Question

在下面的代码中，我试图让橙色div（class="Inner3"）适合容器div的右上角（因为有一个空闲空间）。使用float尝试并使用display:inline-block进行了尝试，但它无效。谁能告诉我怎么做？

谢谢。

.OuterDiv {
  width: 1000px;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  background-color: #E3EAD7;
  height: 1000px;
}
.Inner1 {
  width: 600px;
  background-color: #6D97C0;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner2 {
  width: 600px;
  background-color: #ECB7D8;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner3 {
  width: 300px;
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 300px;
  float: left;
}

<div class="OuterDiv">
  <div class="Inner1"></div>
  <div class="Inner2"></div>
  <div class="Inner3"></div>
</div>

Answer 1

从.Inner3类样式中删除宽度和 float 属性，它将起作用。

.Inner3 {
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 300px;
}

请参阅下面的完整示例：

.OuterDiv {
  width: 1000px;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  background-color: #E3EAD7;
  height: 1000px;
}
.Inner1 {
  width: 600px;
  background-color: #6D97C0;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner2 {
  width: 600px;
  background-color: #ECB7D8;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner3 {
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 400px;
}

<div class="OuterDiv">
  <div class="Inner1"></div>
  <div class="Inner2"></div>
  <div class="Inner3"></div>
</div>

Answer 2

你可以将第一个2 Inner div包装在一个包装div中，并赋予它float: left的属性。

请注意，下面的内容远非完美，因为我不知道场景的具体情况（我已经将静态宽度转换为此示例的百分比），但是可以指示您可能的内容要做什么？

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

.OuterDiv {
  width: 1000px;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  background-color: #E3EAD7;
  height: 1000px;
}
.wrap {
  width: 70%;
  float: left;
}
.Inner1 {
  background-color: #6D97C0;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
}
.Inner2 {
  background-color: #ECB7D8;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
}
.Inner3 {
  width: 30%;
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 400px;
  float: left;
}

<div class="OuterDiv">
  <div class="wrap cf">
    <div class="Inner1"></div>
    <div class="Inner2"></div>
  </div>
  <div class="Inner3"></div>
</div>

Clearfix来源：http://nicolasgallagher.com/micro-clearfix-hack/

Answer 3

Ok那么你的案例中发生了什么：你已经将所有三个div设置为float:left（这将使它们在单行中彼此相邻）并且你已将固定宽度设置为其父级（这对于它们的组合宽度来说还不够），这就是为什么两个div在下一行出现并且仍然相互连接的原因。

为什么不从Inner3中删除float: left或从父

中删除width

让div占据右边的“自由空间”？

3 个答案: