亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何在 PHP 中使用 HTML，特別用 DIV 標簽包裝輸出？

如何在 PHP 中使用 HTML，特別用 DIV 標簽包裝輸出？

慕桂英546537 2023-12-25 15:58:01
我將發布到目前為止我所做的事情，并完全披露我根本不熟悉 PHP。我嘗試添加 DIVS 來幫助我為 PHP 輸出創建布局結構。它大部分出現在頁面上，但我很難讓一些彈性盒樣式起作用。我猜這是因為我在錯誤的地方將 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 回答

?
POPMUISE

TA貢獻1765條經驗 獲得超5個贊

這是要使用的經過驗證的 PHP 代碼。if在 PHP 代碼中，您提供了諸如&之類的條件while，并且div它們內部的條件未按正確的順序關閉。


<?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 代碼保留為常量因素并且不對其進行任何更改。相反，使用 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;

}

<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>


查看完整回答
反對 回復 2023-12-25
?
鴻蒙傳說

TA貢獻1865條經驗 獲得超7個贊

我為此使用 Bootstrap。以下代碼不會在代碼片段上運行，但您可以復制并粘貼到 php 運行的地方


<!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>

我希望這可以幫助你



查看完整回答
反對 回復 2023-12-25
  • 2 回答
  • 0 關注
  • 181 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號