Question

我正在尝试执行以下操作，即将内部div的宽度指定为父div的百分比。

<div>
    <div style="width: 20%">
        some text
    </div>
    <div style="width: 80%">
        Some more text
    </div>
</div>

如何执行此操作，以使内部div保留在父div内？我尝试将float添加到内部div中。如果我这样做，则内部div会在父div之外。我不希望将宽度指定为像素。

我看到了以下内容： Setting Inner Div width's percentage of parent

我想要做的可能有所不同。我愿意使用类似引导程序的方法来实现这一目标。

Answer 1

您可以使用flexbox实现这一目标！首先，我们需要稍微更新一下您的标记，添加一些类名

<div class="parent">
    <div class="child1">
        some text
    </div>
    <div class="child2">
        Some more text
    </div>
</div>

然后您需要为父div赋予显示柔性，也可以添加高度

.parent{
  display: flex;
  height: 100px;
}

最后一次给子div设置所需的宽度

.child1{
  width: 20%;
}

.child2{
  width: 80%;
}

Here如果要检查它，您有一个密码笔，还有here一篇您可以阅读有关flexbox及其工作原理的文章！

Answer 2

我假设您希望div内联显示？如果我的假设正确，则可以使用float和inline-block。

  <div id="wrapper">
    <div id="div1">some text</div>
    <div id="div2">some more text</div>
  </div>

以下样式：

div {
  display: inline-block;
}

#wrapper {
  width: 100%;
}

#div1 {
  background: pink;
  width: 20%;
  float: left;
}

#div2 {
  background: lightgrey;
  width: 80%;
}

参见此处：https://jsbin.com/xipinaj/edit?html,css,output

Answer 3

如果您使用引导程序，建议使用引导程序功能来执行此操作。您可以使用引导网格轻松构建它

https://getbootstrap.com/docs/4.0/layout/grid/

如何指定内部div的wdith作为百分比？

3 个答案: