Question

我发现HTML / CSS组合可以完成这些事情中的一个或多个，但没有一个能够完成所有这些事情。基本上我想要：

带有六个图块的图块样式菜单
每个瓷砖是固定的高度和宽度（可能是10em - 平方）
包装文本而不创建更大的图块（行高有此问题）
瓷砖的背景颜色，但右侧和下方的空白（边距）
所有文字垂直和水平居中
用于较小显示的包装瓷砖

基本上我正在寻找类似按行折叠选项here但内置文本（而WordPress似乎没有识别@breakpoint规则，因此它对我不起作用）。我已经尝试了各种显示方法：table / table-cell，display：inline-block，position：absolute / relative和不同的元素类型（div，a，p，tables ...）但是无法实现任何目标上面列出的所有标准。任何人都有一个解决方案（理想情况下只使用标准的HTML和CSS，以便在WordPress中轻松实现）？

以下是我尝试过的其中一种方法的示例。示例一显示了我喜欢它的外观（使用更好的配色方案和正确的链接样式），除了较小的瓷砖和包装文本。示例2包含文本，但由于使用了行高，包含文本的切片高度加倍。

.big a {
display:inline-block; width:15em; line-height:15em; text-align:center; background-color:#FFC107; padding:10px; margin-bottom:10px; margin-right:10px;
}

.small a {
display:inline-block; width:10em; line-height:10em; text-align:center; background-color:#FFC107; padding:10px; margin-bottom:10px; margin-right:10px;
}

<p><strong>Example one</strong></p>

<div class="big"><a><strong>Language change</strong></a><a><strong>Language diversity</strong></a><a><strong>Language and the media</strong></a><a><strong>Language and gender</strong></a><a><strong>Child language acquisition</strong></a><a><strong>Discoures and attitudes</strong></a></div>

<p><strong>Example two</strong></p>

<div class="small"><a><strong>Language change</strong></a><a><strong>Language diversity</strong></a><a><strong>Language and the media</strong></a><a><strong>Language and gender</strong></a><a><strong>Child language acquisition</strong></a><a><strong>Discoures and attitudes</strong></a></div>

Answer 1

使用display:flex和align-items: center;

这样的事情怎么样？

注意：可能与某些较旧的网络浏览器不兼容。

.small{
  display:flex;
  flex-wrap:wrap;
}

.small a {
display:flex; align-items: center; height:10em; width:10em; text-align:center; background-color:#FFC107; margin-bottom:10px; margin-right:10px; padding:30px; box-sizing:border-box;
}

<p><strong>Example two</strong></p>

<div class="small">
<a><strong>Language change</strong></a>
<a><strong>Language diversity</strong></a>
<a><strong>Language and the media</strong></a>
<a><strong>Language and gender</strong></a>
<a><strong>Child language acquisition</strong></a>
<a><strong>Discoures and attitudes</strong></a>
</div>

Answer 2

带有六个图块的图块样式菜单

我建议<div>有六个display:inline-block <div>个孩子。

每个瓷砖是固定的高度和宽度（可能是10em - 平方）

当然，我们会为您的<div>个孩子width:10em; height:10em;

包装文本而不创建更大的图块（行高有此问题）

首先，我们为每个<div>子项提供overflow:hidden;，因此即使内容大于图块，也会被剪切。然后，由于我们知道孩子的身高是10em，如果你能确定文本的行数，你可以将line-height定义为2em甚至20％，这将是10em的20％。< / p>

瓷砖的背景颜色

这很容易：background-color:#00FF00;

但是所有文本中心和下方的空格（边距）

我建议你改用边框：border-width:0px 0px 0.5em 0.5em;。如果你做得好，没有人能够告诉它的边界而不是边缘。

用于较小显示的垂直和水平包裹的瓷砖

内联块将为您完成此操作。由于每个<div>子项的宽度为10em，因此您可以为容器<div> max-width:30em提供容器，它会在小屏幕上缩小，使内联块子项跳到下一行。

希望至少为你提供一些有用的想法。

如何创建此平铺页面布局？

2 个答案: