php中子元素的编码矩阵
Posted
技术标签:
【中文标题】php中子元素的编码矩阵【英文标题】：coding matrix of child elements in php 【发布时间】：2022-01-21 14:38:45 【问题描述】：给定变量 $n、$m 和 $gap 的值。
我想显示一个由相等的红色矩形组成的矩阵，其尺寸为 $m 行和 $n 列。矩形之间的垂直和水平空间将分别是父元素宽度和高度的 $gap 百分比。相同大小将具有矩阵的边距到父边缘。
例如对于 $n=2 和 $m=3，这是期望的结果：
这是我的代码：
<?php
$n=2; //axis x
$m=3; //axis y
$gap=10% //percent of the parent's dimension
$childwidth=round((100-$gap*($n+1))/$n);
$childheight=round((100-$gap*($m+1))/$m);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hey I am a title</title>
<style>
bodymargin:0px;
.parent, html, bodywidth: 100%; height: 100%;
.parentmargin: <?php echo $gap; ?>% <?php echo $gap; ?>% 0 0;
.childmargin: 0% 0% <?php echo $gap; ?>% <?php echo $gap; ?>% ; width: <?php echo $childwidth; ?>%; height: <?php echo $childheight; ?>%; background-color: #a00;
</style>
</head>
<body>
<div class=parent>
<div class=child>e</div>
<div class=child>r</div>
<div class=child></div>
<div class=child></div>
<div class=child></div>
<div class=child></div>
</div>
</body>
</html>
能否请教一下如何完成它？谢谢。
我使用父元素的百分比。如果需要使用像素来代替，我有这段代码可以将窗口尺寸转换为 php 变量（在我的情况下为 window=parent）。
<script type="text/javascript">
document.cookie = 'window_width='+window.innerWidth+'; expires=Fri, 3 Aug 2901 20:47:11 UTC; path=/';
document.cookie = 'window_height='+window.innerHeight+'; expires=Fri, 3 Aug 2901 20:47:11 UTC; path=/';
</script>
<?php
echo "inner: ";
echo $_COOKIE['window_width']."x";
echo $_COOKIE['window_height'];
?>
【问题讨论】：
您从讨论父元素开始，然后开始讨论窗口尺寸 - 您想将哪个用于网格的宽度和高度 - 父元素的宽度和高度或窗口的宽度和高度或者....我看不到窗口尺寸的相关性。 首先我打算为 parent=window 解决这个问题，但后来我意识到为任何父元素解决这个问题会更有趣。 好的，谢谢，没解决。那么到目前为止，您所拥有的实际问题是什么？我注意到类名周围缺少引号，但是您还想要什么吗？ 我的代码不起作用，您可能会注意到。你会如何处理这样的问题？谢谢。 在我得到正确的语法之后（在这种情况下，引号围绕类）我会运行代码并在我的浏览器中使用开发工具检查工具来查看设置的确切值在类中，如果它们看起来不正确，请查看 PHP 中正在进行的计算。 【参考方案1】：在我看来，您所需要的只是一个相当简单的 css grid（使用 display: grid 和 gap 等）。
这是一些examples on how to use it。
【讨论】：
以上是关于php中子元素的编码矩阵的主要内容，如果未能解决你的问题，请参考以下文章