我有四个按钮(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 艺术印象(我不是艺术家):
初始“完整”页面宽度
+-----------------------------------+
|[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] |
|[ ] |
进一步缩小,所有四个 btn 都缩小
+--------------------+--------------+
|[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
。但是,这并未考虑“等宽”要求并且如果页面太窄,单元格不会中断,而是 100% 宽度的表格会超出其容器。
如何解决这个问题?
我正在寻找没有 javascript 的解决方案。
最佳答案
使用 Flexbox,您可以模仿这种行为。
这里的主要技巧是 2 个伪元素,它们充当幽灵 并使第 4 个按钮即使在包裹到第二行后仍继续收缩,因此所有按钮始终具有相同的宽度。
堆栈片段
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;
}
<div>
<a href="/">btn 1</a>
<a href="/">btn 2 long</a>
<a href="/">btn 3 long</a>
<a href="/">btn 4</a>
</div>
关于html - 元素应占用可用的水平空间并在必要时中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44679951/