标题说明:我真的不知道如何完美地命名这个问题。如果有人可以建议一个更合适的标题,请这样做。
长话短说:我需要在一个父<div>
标签内显示9个子<div>
标签。
如果要显示11个<div>
标签,我需要有2个父<div>
标签,其中第一个有9个孩子<div>
,第二个有2个孩子div>
。'< / p>
functions.php:
$display = 0;
$x = 0;
for ($divs=0; $divs < $total_divs; $divs++) {
echo '<div class="w3-display-container" style="height: 300px;">';
for (; $x < count($test_cases); $x++) {
if ($display > 8) {
$display = 0;
}
echo '<div class="' . $displays[$display] . ' w3-padding">';
echo '<form target="_blank" action="./test.php" method="get">';
echo '<input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="' . $test_cases[$x] . '" name="test">';
echo '</form>';
echo '</div>';
$display++;
}
echo '</div>';
}
问题:我们假设有11个孩子<div>
。除了所有子<div>
标签都输出到第一个父<div>
中之外,其他所有操作均正常。第二父级<div>
为空。我在HTML脚本的最底部留下了评论。如您所见,第十和第十一个标签会覆盖第一和第二个标签。
我需要在第一个父级<div>
中显示前9个<div>
,在第二个父级<div>
中显示其余2个<div>
标签。为了实现它,我需要将第九个后的每个子<div>
标签输出到第二个父<div>
中。 我该怎么做?
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container w3-padding-32">
<div class="w3-display-container" style="height: 300px;">
<div class="w3-display-topleft w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="first" name="test-case"></form></div><div class="w3-display-topmiddle w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="second" name="test-case"></form></div><div class="w3-display-topright w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="third" name="test-case"></form></div><div class="w3-display-left w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="fourth" name="test-case"></form></div><div class="w3-display-middle w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="fifth" name="test-case"></form></div><div class="w3-display-right w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="sixth" name="test-case"></form></div><div class="w3-display-bottomleft w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="seventh" name="test-case"></form></div><div class="w3-display-bottommiddle w3-padding"><form target="_blank" action="./report.php" method="get">
<input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="eigth" name="test-case"></form></div><div class="w3-display-bottomright w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="ninth" name="test-case"></form></div><div class="w3-display-topleft w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="tenth" name="test-case"></form></div><div class="w3-display-topmiddle w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="eleventh" name="test-case"></form></div></div>
<!-- This div should contain tenth and eleventh child divs -->
<div class="w3-display-container" style="height: 300px;"></div>
</div>
答案 0 :(得分:0)
使用array_splice将divs数组拆分为多个块,然后循环播放新数组。
我首先在9上计算mod的剩余部分。
在这种情况下2.
然后,如果$ rem不为零,则添加这两项并将它们添加到$ chunks中。
然后循环播放,直到所有项目都移至$ chunks。
然后我只需要做一个嵌套的foreach来回显它们。
$divs = range(1,11);
$rem = count($divs)%9;
if($rem) $chunks[] = array_splice($divs,0,$rem);
while(count($divs)){
$chunks[] = array_splice($divs,0,9);
}
foreach($chunks as $chunk){
echo "<div>\n";
foreach($chunk as $div){
echo " <div>" . $div . "</div>\n";
}
echo "</div>\n";
}
答案 1 :(得分:0)
不清楚这里发生了什么,但将div分成9个一组,其余似乎正确
<?php
// boundary
$b = 9;
// number of divs
$div_cnt = 12;
// make an array of placeholder (just for demo)
$divs = array_fill(0, $div_cnt, 1);
// split divs into chunks
$chunks = array_chunk($divs, $b);
// loop over chunks
foreach($chunks as $chunk) {
// ignore if chunk has less than 2 items
if(count($chunk) < 2) continue;
// print the first div
echo '<div class="w3-display-container" style="height: 300px;">';
// remove first item (probably want to do something with it)
array_shift($chunk);
// set index
$i = 0;
// loop over remaining
foreach($chunk as $c) {
echo '<div class="' . $displays[$o] . ' w3-padding">';
echo '<form target="_blank" action="./test.php" method="get">';
echo '<input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="' . $test_cases[$i] . '" name="test">';
echo '</form>';
echo '</div>';
}
}
答案 2 :(得分:0)
我只需要在适当的时候突破内循环:
$display = 0;
$x = 0;
for ($divs=0; $divs < $total_divs; $divs++) {
echo '<div class="w3-display-container" style="height: 300px;">';
for (; $x < count($test_cases);) {
if ($display > 8) {
$display = 0;
}
echo '<div class="' . $displays[$display] . ' w3-padding">';
echo '<form target="_blank" action="./test.php" method="get">';
echo '<input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="' . $test_cases[$x] . '" name="test">';
echo '</form>';
echo '</div>';
$x++;
$display++;
// Solution
if ($x !== 0 && $x % 9 === 0) {
break;
}
}
echo '</div>';
}
答案 3 :(得分:0)
defaultProject
输出:
<?php
$total = 3; // total inner divs.
$chunks = 2; // amount of inner divs in each div sandwich
for (
$outer_limit = ceil($total / $chunks), $parent = 0, $counter = 0;
$parent < $outer_limit;
$parent++
) {
echo "<div class='outer'>\n";
for (
$child = 0;
$child < $chunks && $counter < $total;
$child++, $counter++
) {
echo "\t<div class='inner'>\n";
printf(
"\t\tParent: %d, Child: %d, Counter: %d\n",
$parent,
$child,
$counter
);
echo "\t</div>\n";
}
echo "</div>\n";
}
答案 4 :(得分:0)
<?php
define("INTERVAL",9);
function html_div($total_divs)
{
$close = "";
for($case = 0; $case< $total_divs;++$case)
{
$display = $case % INTERVAL; // 0.. 8, print every 0th time
if (0 == $display) // true on every 9th div
echo "${close}\n<DIV CLASS = \"container\">\n";
echo "<div class=\"${display}\" value=\"${case}\"></div>\n";
if (0 == $case)
$close = "</DIV>";
}
echo "${close}\n";
}
html_div(23);
html_div(0);
?>
输出:
<DIV CLASS = "container">
<div class="0" value="0"></div>
<div class="1" value="1"></div>
<div class="2" value="2"></div>
<div class="3" value="3"></div>
<div class="4" value="4"></div>
<div class="5" value="5"></div>
<div class="6" value="6"></div>
<div class="7" value="7"></div>
<div class="8" value="8"></div>
</DIV>
<DIV CLASS = "container">
<div class="0" value="9"></div>
<div class="1" value="10"></div>
<div class="2" value="11"></div>
<div class="3" value="12"></div>
<div class="4" value="13"></div>
<div class="5" value="14"></div>
<div class="6" value="15"></div>
<div class="7" value="16"></div>
<div class="8" value="17"></div>
</DIV>
<DIV CLASS = "container">
<div class="0" value="18"></div>
<div class="1" value="19"></div>
<div class="2" value="20"></div>
<div class="3" value="21"></div>
<div class="4" value="22"></div>
</DIV>