如何创建两个动态文本列，它们在页面上彼此内联答案

【问题标题】：How to create two dynamic text columns that run down a page inline with one another如何创建两个动态文本列，它们在页面上彼此内联
【发布时间】：2017-08-03 12:01:16
【问题描述】：

我正在寻找的是一种将两个完整的表单元素彼此相邻打印的方法，因为它们沿着 php 页面向下移动。基本上是两列重复元素。

我有一个“div”循环，它使用我猜的相同 div 在我的页面上创建多个元素？我正在使用两个变量在页面下降时设置它们在页面上的位置，例如。 ($down += 200, $left += 200) 并且效果很好。我面临的问题是我必须在每个元素之间放置过多的空间，因为有些部分是 20px 高，有些是 50px 高。使用 div 循环，据我所知，它们似乎并不了解彼此，这意味着所有较小的元素会导致下一个较大的元素无法在页面下方移动足够远，从而使它们重叠。它宁愿不考虑每个单独的人，只让它在较小的人身上做额外的空间。我觉得应该有一个更好的选择。我也想避免使用表格，除非有人可以向我展示没有表格部分和格式的表格。

while ($results = mysqli_fetch_assoc($towerquery))
                    {
                    if ($number % 2 == 0 && $number !== 0 ){ $left = 200;  $down += 320; }
                    print '<span style="display:block;position:relative;left:'.$left.'px;top:'.$down.'px;font-family:tahoma;font-size:13px;margin:40px;">';
                    $down -= 300;
                    $left += 500;
                    }

【问题讨论】：

标签： php html css

【解决方案1】：

您始终可以使用 Flexbox 创建等高的 div：

.paddingBlock {
  padding: 20px 0;
}

.eqDisplay {
  display: flex;
}

.equal {
  padding: 10px;
}

.equal:nth-of-type(odd) {
  background: darkgreen;
}

.equal:nth-of-type(even) {
  background: black;
}

.eqHW {
  flex: 1;
}

.eqHWrap {
  justify-content: space-between;
  color: #eee;
}

<div class="paddingBlock">
  <h1>Equal Column Height</h1>
  
  <div class="eqHWrap eqDisplay">
    <div class="eqHW equal">
      <p>Using</p>
      <p>flex</p>
    </div>
    
    <div class="eqHW equal">
      <p>works</p>
      <p>well</p>
      <p>despite</p>
      <p>content</p>
      <p>length</p>
    </div>
  </div>
</div>

在 php 中使用它可以回显结果：

<?php
    $yourVariable = array(1,9,5,12,73);
    echo '<div class="paddingBlock"><div class="eqHWrap eqDisplay">';
    while (x === x) {
        echo '<div class="eqHW equal">' . $yourVariable . '</div>';
    }
    echo '</div></div>';
?>

【讨论】：

这并不代表循环带来的问题。它的行为就像它都是同一个 div 并且它会将它们都放在页面上的同一个位置，除非我遗漏了一些东西。我想试试这个，但我必须彻底检查我的整个文件，而且我不相信它会循环工作。
有没有比循环更好的方法，我应该使用仅使用 IP 地址将 200 个项目呈现到页面上？我觉得我肯定对某事有点不满意。始终对更好的代码持开放态度。
对不起，我忘了添加循环，我已经更正了答案以显示您是否在 while 循环中使用它。真的适用于任何类型的循环。
Ayyyyeeeeeeee。这一切都因为有你而成为可能！感谢您提供如此深入而完整的解决方案！我会将您标记为最佳答案，并发布我需要使它工作的整理位。还有一张后续图片，向您展示出色的工作。谢谢！
很高兴能帮上忙！

【解决方案2】：

上面的答案绝对是让我走上胜利和统治网页的道路，但我必须添加一个单独的部分以使其对我有用，我在下面发布了

$number = 0;
if ($number % 2 == 0 || $number == 0 ) { print '<div class="eqHWrap eqDisplay">'; }
print '<div class="eqHW equal">';
print '<p>';

//multiple if statements, span elements, line breaks, returns

print '</p>';
if ($number % 2 !== 0 && $number !== 0 ) { print '</div>'; }
print '</div>';
$number++;

这个额外的代码允许我只使用一个 div 并让它作为两个执行，因为我从一组 IP 中提取，并且由于编码灾难我无法同时获取当前和下一个不断地撞上。我假设其他人在创建循环以从数组中提取时遇到相同的问题，因为您通常一次只能按顺序执行一个。我的代码现在可以成功运行，如下链接所示！

【讨论】：