试过

Question

我有四个按钮（a - 元素），它们占据div的整个可用水平空间，其间有一些余量空间。四个按钮应该都具有相同的宽度（它们的内容可能会流动）。我目前这样做如下：

的CSS：

div {
    text-align: justify;
}
div::after {
    content: "";
    display: inline-block;
    width: 100%;
}
a {
    display: inline-block;
    text-align: left;
    width: 20%;       /* not precisely 20% and 4%, that's just for */
    margin-right: 4%; /* the sake of the question                  */
    min-width: 10em;
}

HTML：

<div>
    <a href="/">btn 1</a>
    <a href="/">btn 2</a>
    <a href="/">btn 3</a>
    <a href="/">btn 4</a>
</div>

当页面变窄时，按钮会缩小，直到它们达到10em宽。然后他们打破了这一行，在第1行留下了三个按钮，在第2行留下了一个按钮。

但是，按钮现在仍然是10em。我希望他们的增长率（允许利润率）低于33％。如果页面变得更窄，并且按钮再次缩小到10em，则行应该再次中断，第1行上有两个按钮，第2行上有两个按钮。这些按钮应该占用不到50％。

最后，如果外部div缩小到小于20em，预计有四行，按钮宽度为100％（外部div的最小宽度为10em，这很好）。

获得ASCII艺术印象（我不是艺术家）：

初始＆＃34;完整＆＃34;页面宽度

+-----------------------------------+
|[ab    ] [cdef  ] [ghi   ] [jk lm ]|
|[      ] [      ] [      ] [      ]|

页缩小

+-------------------------------+---+
|[ab   ] [cdef ] [ghi  ] [jk lm]|
|[     ] [     ] [     ] [     ]|

页面进一步缩小，最后btn流动其内容

+---------------------------+-------+
|[ab  ] [cdef] [ghi ] [jk  ]|
|[    ] [    ] [    ] [lm  ]|

进一步缩小，对于四个btn来说太窄了第1行有3个btn，全宽，第2行有1个btn，宽度相等

+-----------------------+-----------+
|[ab   ] [cdef ] [ghi  ]|
|[     ] [     ] [     ]|

|[jk lm]                |
|[     ]                |

进一步缩小，所有四个缩小

+--------------------+--------------+
|[ab  ] [cdef] [ghi ]|
|[    ] [    ] [    ]|

|[jk  ]              |
|[lm  ]              |

进一步缩小，对于三个btn来说太窄了

+-----------------+-----------------+
|[ab    ] [cdef  ]|
|[      ] [      ]|

|[ghi   ] [jk lm ]|
|[      ] [      ]|

进一步缩小

+-------------+---------------------+
|[ab  ] [cdef]|
|[    ] [    ]|

|[ghi ] [jk  ]|
|[    ] [lm  ]|

进一步缩小，对于两个btn来说太窄了

+---------+-------------------------+
|[ab     ]|
|[       ]|

|[cdef   ]|
|[       ]|

|[ghi    ]|
|[       ]|

|[jk lm  ]|
|[       ]|

因此，实际结果：

+-----------------+-----------------+
|[ab  ]   [cdef]  |
|[    ]   [    ]  |

|[ghi ]   [jk  ]  |
|[    ]   [lm  ]  |

预期结果：

（按钮的最佳宽度）

+-----------------+-----------------+
|[ab    ] [cdef  ]|
|[      ] [      ]|

|[ghi   ] [jk lm ]|
|[      ] [      ]|

试过

我曾尝试使用flexbox。然而，由于旧的浏览器（并且有如此大的突破，很多可用性受到威胁），我仍然觉得使用它并不舒服。而且，我无法比最后一个按钮占用整个空间更进一步（从而成为比其他按钮大3倍）。如：

+-----------------------+-----------+
|[ab   ] [cdef ] [ghi  ]|
|[     ] [     ] [     ]|

|[jk lm                ]|  <-- this btn is as wide as _three_ other buttons
|[                     ]|

我也试过display: table。但是，这并不能解释＆＃34;等宽＃34;要求和如果页面太窄，单元格不会中断，而是100％宽度的表格会超出其容器。

这是如何解决的？

我正在寻找一个没有javascript的解决方案。

Answer 1

使用Flexbox，您可以模仿该行为。

这里的主要技巧是2个伪元素充当 ghost＆＃39; 并使第4个按钮继续收缩，即使它被包裹到第二行，所以所有按钮都具有相同的宽度一直以来。

Fiddle demo

Stack snippet

＆＃13;

div {
  display: flex;
  flex-wrap: wrap;
}

a {
  flex: 1 0 calc(25% - 16px);
  margin: 2px 8px;
  text-align: left;
  min-width: 6em;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box;
}

div::after, div::before {
  content: '';
  flex: 1 0 calc(25% - 16px);
  margin: 0 8px;
  min-width: 6em;
  padding: 10px 10px;
  border: 1px solid transparent;
  box-sizing: border-box;
  order: 1;
}

＆＃13;

<div>
  <a href="/">btn 1</a>
  <a href="/">btn 2 long</a>
  <a href="/">btn 3 long</a>
  <a href="/">btn 4</a>
</div>

＆＃13;

元素应占用可用的水平空间并在必要时中断

因此，实际结果：

预期结果：

试过

1 个答案: