Question

我的父div中有两个div：

<div>
  <div class="col-1"></div>
  <div class="col-2"></div>
</div>

.col-1, .col-2 {
  width: 50%;
}

它们的宽度均为50％。然而，即使他们的背景确实是父母的50％，他们仍继续占据其父母的100％。为什么这样？

Answer 1

div需要被视为除法，除非你告诉它浮动，否则将采用行的所有宽度，即使它可能无法填充，这是因为应用于div的固有css属性display:block。如果你通过向他们的css添加float:left;或float:right;来告诉两个div浮动，他们将允许其他元素共享其父级的宽度。这是一个片段（你可以通过点击运行按钮查看结果）看起来像什么

#container .child{
  width:50%;
  float:left;
}

.red{background:red;}
.blue{background:blue}

<div id='container'>
  <div class='child red'>a</div>
  <div class='child blue'>b</div>
</div>

Answer 2

试试这个：

.col-1{
  float:left;
}
.col-2{
  float:right;
}

Answer 3

您还可以尝试使用display属性，例如display:inline-block可以帮助您

Answer 4

这是示例程序...你可以使用“float”

<div id="container" style="width:100%">

<div id="menu" style="background-color:blue; height:200px; width:50%; float:left; color:white;">
Div1</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:50%;float:left;">
Div2</div>

</div>

</body>
</html>

Answer 5

如果您想精确控制<div>的位置，则应使用position: absolute

<style>
  .container {
    position: relative;
  }
  .col-1, .col-2 {
    position: absolute;
    width: 50%;
    top: 0;
  }
  .col-1 { left: 0; }
  .col-2 { left: 50%; }
</style>

[...]

<div class="container">
  <div class="col-1">[...]</div>
  <div class="col-2">[...]</div>
</div>

为什么div继续占据100％的父母，即使其明确宽度为50％

5 个答案: