Question

我需要用另外两个div填充一个div，这些div必须填充父div的50％，但是子div只填充其内容。

＆＃13;

.uno {
  background-color: blue;
  width: 50%;
  display: inline;
}

.dos {
  background-color: green;
  width: 50%;
  display: inline;
}

.super {
  width: 100%;
}

＆＃13;

<div class="super">
  <div class="uno">
    aaaaaa
  </div>
  <div class="dos">
    bbbbb
  </div>
</div>

＆＃13;

Answer 1

您需要添加float:left属性。请检查一下：

＆＃13;

.uno{
  background-color: blue;
  width: 50%;
  float:left;
}
.dos{
  background-color: green;
  width: 50%;
  float:left;
}
.super{
  width: 100%;
}

＆＃13;

<div class="super">
      <div class="uno">
        aaaaaa
      </div>
      <div class="dos">
        bbbbb
      </div>
    </div>

＆＃13;

Answer 2

试试这个：put float：left和display：block如下所示

＆＃13;

.uno{
  background-color: blue;
  width: 50%;
  float:left;
  display:block;
}
.dos{
  background-color: green;
  width: 50%;
  float:left;
  display:block;

}
.super{
  width: 100%;
}

＆＃13;

<div class="super">
      <div class="uno">
        aaaaaa
      </div>
      <div class="dos">
        bbbbb
      </div>
    </div>

＆＃13;

Answer 3

如前所述 - 尝试更改＆＃39;显示＆＃39;儿童元素来阻止＆＃39;阻止＆＃39;并添加＆＃39;浮动＆＃39;左？＆＃39;在css。但是你会遇到问题 - 父母会表现得像没有孩子一样。最简单的解决方法 - 添加＆＃39;溢出＆＃39;隐藏＆＃39;到.super

Answer 4

@AFS，如果你使用浮动，你会失去父亲的身高。 flex的解决方案。

＆＃13;

.uno{
  background-color: blue;
  width: 50%;
}
.dos{
  background-color: green;
  width: 50%;
}
.super{
  width: 100%;
  display: flex;
}

＆＃13;

    <div class="super">
      <div class="uno">
        aaaaaa
      </div>
      <div class="dos">
        bbbbb
      </div>
    </div>

＆＃13;

Div不会填充容器的50％

4 个答案: