如何将内部 div 的宽度指定为百分比？答案

【问题标题】：How to specify wdith of inner divs as percentage?如何将内部 div 的宽度指定为百分比？
【发布时间】：2018-11-11 04:20:51
【问题描述】：

我正在尝试做类似以下的事情，即将内部 div 的宽度指定为父 div 的百分比。

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

如何做到这一点，使内部 div 留在父 div 内？我尝试将浮动添加到内部 div。如果我这样做，内部 div 会在父 div 之外。我不希望将宽度指定为像素。

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

我想要做的可能有点不同。我愿意使用诸如引导程序之类的东西来实现这一目标。

【问题讨论】：

尝试在外层div上添加style="position: relative;"？
为您的 div 使用列结构。需要调整宽度的特定类。此外，提供一个 jsfiddle/codepen 链接，显示您所做的以及您想要实现的目标

标签： html css twitter-bootstrap

【解决方案1】：

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

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

那么你需要给父div一个显示flex，你也可以添加一个高度

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

最后你给子 div 你想要的宽度

.child1{
  width: 20%;
}

.child2{
  width: 80%;
}

Here 你有一个 codepen，如果你想检查它，here 你可以阅读一篇关于 flexbox 及其工作原理的文章！

【讨论】：

你不必设置父div的宽度。 div 的自动宽度为 100%。
是的，你是对的，这是我的习惯，但我认为这样做没有错。
问题是当您向 div 添加填充和/或边距时。 See this question.
谢谢这个问题，我从来没有注意过，因为我一直使用 boxing size:border-box，但我不知道 OP 是否在使用它，我会记住的未来。

【解决方案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

【讨论】：

虽然 flexbox 是一个更优雅的解决方案，但@MartinBA 的解决方案更好。我只是展示了一个替代方案。

【解决方案3】：

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

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

【讨论】：