为什么 div 的宽度不能按定义工作？答案

【问题标题】：Why is the width of divs not working as defined?为什么 div 的宽度不能按定义工作？
【发布时间】：2018-02-19 14:34:13
【问题描述】：

我的目标是在一个父 div 中嵌套 5 个 div。每个 div 都一样宽，并且并排。

这是我的 HTML：

<div style="margin-left: auto; margin-right: auto; width: 80%;">
    
    <div style="display: table-row;">
    <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
    <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
    <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
    <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
    <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
    </div>

    </div>

并排功能有效，但宽度无效。这一切都只是挤到左边。任何想法为什么？

【问题讨论】：

您的 div 的样式为 table-cell，因此它的作用类似于表格。试试看这里：stackoverflow.com/questions/10525744/css-table-cell-equal-width
你只需要把"display:table"放在第一个div中。

标签： html

【解决方案1】：

使用flex-boxes 可以非常漂亮地实现这一点。

<div style="margin-left: auto; margin-right: auto; width: 80%; display: flex">
    <div style="flex: 1; text-align: center;">Left</div>
    <div style="flex: 1; text-align: center;">Left</div>
    <div style="flex: 1; text-align: center;">Left</div>
    <div style="flex: 1; text-align: center;">Left</div>
    <div style="flex: 1; text-align: center;">Left</div>
</div>

【讨论】：

【解决方案2】：

使用 display: flex 并将所有元素扩大到 100%。

.wrapper {
  display: flex;
}

.wrapper > div {
  width: 100%;
}

<div class="wrapper">
  <div>Left</div>
  <div>Left</div>
  <div>Left</div>
  <div>Left</div>
  <div>Left</div>
</div>

【讨论】：

【解决方案3】：

要实现这一点，您需要将 display: table; 设置为外部 div：

<div style="margin-left: auto; margin-right: auto; width: 80%;display:table">
    <div style="display: table-row;">
        <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
        <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
        <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
        <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
        <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
    </div>
</div>

【讨论】：

【解决方案4】：

问题是您使用的是table-row，而它没有在table 中。

<div style="margin-left: auto; margin-right: auto; width: 80%;display:table">

  <div style="display: table-row;background-color:green;">
    <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
    <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
    <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
    <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
    <div style="display: table-cell; text-align: center; width: 20%;">Left</div>
  </div>

</div>

【讨论】：

【解决方案5】：

尝试改变

<div style="display: table-row;">

到

<div style="display: table; width:100%;">

【讨论】：