文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在PHP中使用HTML，特别是用DIV标记包装输出？

问如何在PHP中使用HTML，特别是用DIV标记包装输出？
EN

Stack Overflow用户
提问于 2020-04-15 05:43:49
回答 2查看 74关注 0票数 0

我将发布我到目前为止所做的一切，并完全公开我对PHP一点都不精通。

我尝试添加DIVS来帮助我为PHP输出创建布局结构。它大部分出现在页面上，但我很难让一些flexbox样式工作。

我猜这是因为我在错误的地方包装了PHP中的HTML。

​

​

代码语言：javascript
复制
<?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; ?>
html
css
wordpress
flexbox
php
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-04-15 10:40:40

下面是要使用的经过验证的PHP代码。在PHP代码中，您提供了像if & while这样的条件，以及其中没有按正确顺序结束的div。

代码语言：javascript
复制
<?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 else: ?>
            <?php /* icon not found */ ?>
          <?php endif; ?>
        </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>
          <?php else: ?>
            <?php /* no rows found */ ?>
          <?php endif; ?>
        </div>
      </div>
    </div>
  <?php endwhile; ?>
  </div>
<?php else: ?>
  <?php /* no rows found */ ?>
<?php endif; ?>

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

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

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

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<div class="category-container">

  <div class="category-wrapper">
    <div class="category-title">
      Category Title 1
    </div>
    <div class="columns-2">
      <div class="category-icon">
        <img src="https://via.placeholder.com/100/FF0000/FFFFFF" />
      </div>
      <div class="category-item-list">
        <ul class="category-list">
          <li>item verylonglengthword</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="category-wrapper">
    <div class="category-title">
      Category Title 2
    </div>
    <div class="columns-2">
      <div class="category-icon">
        <img src="https://via.placeholder.com/100/FF0000/FFFFFF" />
      </div>
      <div class="category-item-list">
        <ul class="category-list">
          <li>item verylonglengthword</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="category-wrapper">
    <div class="category-title">
      Category Title 3
    </div>
    <div class="columns-2">
      <div class="category-icon">
        <img src="https://via.placeholder.com/100/FF0000/FFFFFF" />
      </div>
      <div class="category-item-list">
        <ul class="category-list">
          <li>item verylonglengthword</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="category-wrapper">
    <div class="category-title">
      Category Title 4
    </div>
    <div class="columns-2">
      <div class="category-icon">
        <img src="https://via.placeholder.com/100/FF0000/FFFFFF" />
      </div>
      <div class="category-item-list">
        <ul class="category-list">
          <li>item verylonglengthword</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
        </ul>
      </div>
    </div>
  </div>

</div>

​

票数 1
EN

Stack Overflow用户

发布于 2020-04-15 07:33:54

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

​

代码语言：javascript
复制
<!doctype html>
<html>

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</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>';
				    print '</div>';
			    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>';
				    print '</div>';
			    print '</div>';
			}
			catch(Exception $e) {
                echo 'Message: ' .$e->getMessage();
            }
		?>

</body>

</html>

​

我希望这能帮助你

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/61217752

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档