首页猿问我如何在 PHP 中使用...

我如何在 PHP 中使用 HTML，特别是用 DIV 标签包装输出？

PHP

泛舟湖上清波郎朗 2022-12-23 13:58:05

我将发布我到目前为止所做的事情，并完全披露我根本不精通 PHP。我试图添加 DIVS 来帮助我为 PHP 输出创建布局结构。它大部分出现在页面上，但我很难让一些 flexbox 样式起作用。我猜这是因为我在错误的地方将 HTML 包装在 PHP 周围。<?php if ( have_rows( 'category_listing' ) ) : ?><div class="category-container"> <?php while ( have_rows( 'category_listing' ) ) : the_row(); ?> <div class="category-wrapper"> <div class="category-title"> <h3><?php the_sub_field( 'category_title' ); ?></h3> </div> <div class="columns-2"> <div class="category-icon"> <?php $icon = get_sub_field( 'icon' ); ?> <?php if ( $icon ) { ?> <img src="<?php echo $icon['url']; ?>" alt="<?php echo $icon['alt']; ?>" /> <?php } ?> </div> <div class="category-item-list"> <?php if ( have_rows( 'item_list' ) ) : ?> <ul class="category-list"> <?php while ( have_rows( 'item_list' ) ) : the_row(); ?> <li> <?php the_sub_field( 'item' ); ?> </li> <?php endwhile; ?> </ul> </div> </div> </div> <?php else : ?> <?php // no rows found ?> <?php endif; ?> <?php endwhile; ?><?php else : ?> <?php // no rows found ?></div><?php endif; ?>

查看完整描述

2 回答

LEATH

TA贡献1936条经验获得超6个赞

这是要使用的经过验证的 PHP 代码。在 PHP 代码中，您提供了if&之类的条件while以及div它们内部未按正确顺序关闭的条件。

<?php if (have_rows('category_listing')): ?>

<?php while (have_rows('category_listing')): the_row(); ?>

</div>

<?php $icon = get_sub_field('icon'); ?>

<?php if ($icon): ?>

<?php else: ?>

<?php /* icon not found */ ?>

<?php endif; ?>

</div>

<?php if (have_rows('item_list')): ?>

<?php while (have_rows('item_list')): the_row(); ?>

<li>

<?php the_sub_field('item'); ?>

</li>

<?php endwhile; ?>

</ul>

<?php else: ?>

<?php /* no rows found */ ?>

<?php endif; ?>

</div>

<?php endwhile; ?>

</div>

<?php else: ?>

<?php /* no rows found */ ?>

<?php endif; ?>

查看设计，似乎应该category-wrapper在category-title无序列表上居中对齐。

假设我们将您在问题中分享的 PHP 代码保留为常数，并且不对其进行任何更改。而不是使用 then 来管理设计要求css，下面堆栈片段中使用的样式应该可以满足您的目的。

您可以进一步细化样式。我使用了问题中提供的类名，并采用了基于设计的样式。

body {

background-color: #fff;

}

.category-container {

display: flex;

width: 100%;

font-family: Arial, sans-serif;

color: red;

flex-wrap: wrap;

flex-direction: column;

height: 600px;

}

.category-wrapper {

display: block;

width: 50%;

padding: 20px;

box-sizing: border-box;

border: 1px solid red;

}

.category-title {

font-weight: bold;

text-transform: uppercase;

text-align: center;

margin-bottom: 1rem;

margin-left: 30%;

}

.columns-2 {

display: flex;

}

.category-icon {

width: 30%;

text-align: center;

}

.category-icon img {

border-radius: 50%;

}

.category-item-list {

width: 70%;

}

.category-list {

column-count: 2;

margin-top: 0;

}

.category-list li {

word-wrap: break-word;

padding-right: 1rem;

hyphens: auto;

}

Category Title 1

</div>

</div>

<li>item verylonglengthword</li>

</ul>

</div>

Category Title 2

</div>

</div>

<li>item verylonglengthword</li>

</ul>

</div>

Category Title 3

</div>

</div>

<li>item verylonglengthword</li>

</ul>

</div>

Category Title 4

</div>

</div>

<li>item verylonglengthword</li>

</ul>

</div>

反对回复 2022-12-23

慕尼黑8549860

TA贡献1818条经验获得超11个赞

我为此使用 Bootstrap。以下代码不会在代码片段上运行，但您可以复制并粘贴到 php 正在运行的位置

<!doctype html>

<html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<?php

//SHOULD BE A MATRIX, SAME NUMBER OF COLUMNS

$cars = array

(

array("Volvo",22,18),

array("BMW",15,13),

array("Saab",5,2),

array("Land Rover",17,15),

array("Ferrari",17,15)

);

$tanks = array

(

array("Hellcat",220,180),

array("Tiger",150,130),

array("ISU",500,200),

array("Cromwell",170,150)

);

$fruits = array

(

array("Apple",22,18),

array("Banana",15,13),

array("Watermelon",5,2),

);

$colors = array

(

array("Black",2,8),

array("White",1,3),

array("Blue",5,0),

array("Green",7,1),

array("Yellow",5,0)

);

try {

//If questions about css verify how Bootstrap 3 works

print '<div class="container">';

print '<div class="row">';

//FOR CARS

print '<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">';

for($x=0;$x<count($cars);$x++){

for($y=0;$y<count($cars[$x]);$y++){

print "<p>".$cars[$x][$y]."</p>";

}

print '</div>';

//FOR TANKS

print '<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">';

for($x=0;$x<count($tanks);$x++){

for($y=0;$y<count($tanks[$x]);$y++){

print "<p>".$tanks[$x][$y]."</p>";

}

print '</div>';

//If questions about css verify how Bootstrap 3 works

print '<div class="container">';

print '<div class="row">';

//FOR FRUITS

print '<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">';

for($x=0;$x<count($fruits);$x++){

for($y=0;$y<count($fruits[$x]);$y++){

print "<p>".$fruits[$x][$y]."</p>";

}

print '</div>';

//FOR COLORS

print '<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">';

for($x=0;$x<count($colors);$x++){

for($y=0;$y<count($colors[$x]);$y++){

print "<p>".$colors[$x][$y]."</p>";

}

print '</div>';

}

catch(Exception $e) {

echo 'Message: ' .$e->getMessage();

}

</body>

</html>

反对回复 2022-12-23

2 回答
0 关注
93 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

我如何在 PHP 中使用 HTML，特别是用 DIV 标签包装输出？

我如何在 PHP 中使用 HTML，特别是用 DIV 标签包装输出？

2 回答

添加回答