Php 当左div在运行时为空时，如何将右div向左移动？

我在问题陈述中提到了我的问题

我在一个网站上工作，当左div在运行时为空时，我想将右div向左移动

这里左div是

和右div 是

是左侧和右侧div的子div

具有左和右div的代码是：

<div class="received">
   <div class="pickup-from-items-location">
      <div class="timings">
         <?php 
            echo $data['item'];

              $serialized = '';
              for ($i = 0; $i < count($data['item']->item_logistic); $i++) {
              if(strcmp($data['item']->item_logistic[$i]->logistics_type, "location_pickup") == 0)
              {
              $serialized .= strtolower($data['item']->item_logistic[$i]->logistics_times);
              }
              }
              if($serialized != '')
              {
              echo
              '<div class="icons_text"> 
              <img src="/images/rsz_venueorange__1_.png"> 
              <p class="mt-4 mb-3 heading_size">pickup from item\'s location </p>
              </div>'; 
              /*
              echo '<span class="font-weight-bold how-can-this-text">' . "how can this item be received" . '</span>';
              echo "<br>"; 
              echo "<br>"; 
              echo '<span class="font-weight-bold mb-3 ml-3">' . "pickup from item's location <br/>" . '</span>';
              echo "<br>";
              echo "<br>"; */
              $unserialized = unserialize( $serialized );


              foreach($unserialized as $key=>$value) 
              {
              echo '
              <div class="dates_timings_items_availability"> 
              <div class="items_availability_weekdays">'. strtolower(date('l', strtotime($key))) .':</div>
              <div class="items_availability_time"><span>'. $value['start'] .'</span></div>
              <div class="delimiter">to</div>
              <div class="items_availability_time"><span>'. $value['end'] .'</span></div>
              </div>'; 
              } 
              }


              else
              {
              /* echo "<p style=\"font-style: italic;\">No information available</p>"; */ 
              }
              ?>
      </div>
   </div>
   <!-- how can this item be received + PICKUP from item's location (FINISH) -->
   <!--DELIVER to my location (START)-->
   <div class="deliver-to-my-location">
      <div class="timings">
         <?php
            $serialized = '';
            for ($i = 0; $i < count($data['item']->item_logistic); $i++) {
            if(strcmp($data['item']->item_logistic[$i]->logistics_type, "delivery") == 0)
            {
            $serialized .= strtolower($data['item']->item_logistic[$i]->logistics_times);
            }
            }
            if($serialized != '')
            {
            echo 
            '<div class="icons_text"> 
            <img src="/images/rsz_deliveryicon__1_.png"> 
            <p class="mt-4 heading_size mb-3" style="width:100%;">deliver to my location </p>
            </div>'; 
            /*
            echo "<br>";
            echo "<br>";
            echo '<span class="font-weight-bold mb-3 ml-3">' . "deliver to my location <br/>" . '</span>';
            echo "<br>";
            echo "<br>"; */
            $unserialized = unserialize( $serialized );

            foreach($unserialized as $key=>$value) {
            echo '
            <div class="dates_timings_items_availability"> 
            <div class="items_availability_weekdays">'. strtolower(date('l', strtotime($key))) .':</div>
            <div class="items_availability_time"><span>'. date('g:i a', strtotime($value['start'])) .'</span></div>
            <div class="delimiter">to</div>
            <div class="items_availability_time"><span>'. date('g:i a', strtotime($value['end'])) .'</span></div>
            </div>';
            }
            }

            ?>
      </div>
   </div>
</div>

问题陈述：

我想知道我应该对上面的css代码或需要添加的JS/Jquery代码做些什么更改，以便当运行时左div为空时，右div应该向左移动

当我使用上面的php代码时，左div在运行时变为空

因此，$serialized string为null时，

变为空，因为我使用的是上面的

if（$serialized！=''）条件

          [[LEFT]                                              [RIGHT]]

左Div为
，右Div为

因此，当左Div为空时，右Div应向左移动

          [[RIGHT]]

只要div在那里，即使其中一个为空，两个div都将并排居中，因此您可以隐藏空div，请尝试以下操作：

<div class="received<?= (count($data['item']->logistic_out) == 0) ? " align-left":'' ?>">
<div class="pickup-from-items-location" class="<?= (count($data['item']->logistic_out) == 0) ? "invisible":'' ?>">
<div class="deliver-to-my-location" class="<?= (count($data['item']->logistic_out) == 0) ? "invisible":'' ?>">


.pickup-from-items-location 
{
margin-right: 100px;
margin-top: 50px;
display: block;
}

.deliver-to-my-location 
{
margin-left: 100px;
margin-top: 50px;
display: block;
}

.invisible {
display: none;
visibility: hidden;
}

.align-left {
  -webkit-box-pack: left;
  -ms-flex-pack: left;
  justify-content: left;
}

只要div在那里，即使其中一个是空的，两个div都会并排居中，因此您可以隐藏空div，请尝试以下操作：

<div class="received<?= (count($data['item']->logistic_out) == 0) ? " align-left":'' ?>">
<div class="pickup-from-items-location" class="<?= (count($data['item']->logistic_out) == 0) ? "invisible":'' ?>">
<div class="deliver-to-my-location" class="<?= (count($data['item']->logistic_out) == 0) ? "invisible":'' ?>">


.pickup-from-items-location 
{
margin-right: 100px;
margin-top: 50px;
display: block;
}

.deliver-to-my-location 
{
margin-left: 100px;
margin-top: 50px;
display: block;
}

.invisible {
display: none;
visibility: hidden;
}

.align-left {
  -webkit-box-pack: left;
  -ms-flex-pack: left;
  justify-content: left;
}

我不太理解这个问题，但我猜您正在使用提交按钮单击提交，在这种情况下为什么不使用JavaScript

HTML

JavaScript

   <script>
     function myFunction() {

        if (document.getElementById('left')=="") {
            document.getElementById('left').style.display = "none";
        } 
         document.getElementById("myForm").submit();
     }
   </script>


函数myFunction（）{
if（document.getElementById（'left'）==“”）{
document.getElementById（'left'）.style.display=“无”；
} 
document.getElementById（“myForm”）.submit（）；
}
我不太理解这个问题，但我猜您正在使用提交按钮单击提交，在这种情况下为什么不使用JavaScript

HTML

JavaScript

   <script>
     function myFunction() {

        if (document.getElementById('left')=="") {
            document.getElementById('left').style.display = "none";
        } 
         document.getElementById("myForm").submit();
     }
   </script>


函数myFunction（）{
if（document.getElementById（'left'）==“”）{
document.getElementById（'left'）.style.display=“无”；
} 
document.getElementById（“myForm”）.submit（）；
}
这里最有效的解决方案是更改
php
并避免呈现空白的
html
元素。如果它没有任何作用，你为什么要添加一些东西，对吗

<div class="received">

   <?php 
        echo $data['item'];

          $serialized = '';
          for ($i = 0; $i < count($data['item']->item_logistic); $i++) {
          if(strcmp($data['item']->item_logistic[$i]->logistics_type, "location_pickup") == 0)
          {
          $serialized .= strtolower($data['item']->item_logistic[$i]->logistics_times);
          }
          }
          if($serialized != '')
          {
          echo
          '

          <!- conditional display ->

          <div class="pickup-from-items-location">
          <div class="timings">

          <!- conditional display ->

          <div class="icons_text">


          ...


这里最有效的解决方案是更改
php
并避免呈现空白的
html
元素。如果它没有任何作用，你为什么要添加一些东西，对吗

<div class="received">

   <?php 
        echo $data['item'];

          $serialized = '';
          for ($i = 0; $i < count($data['item']->item_logistic); $i++) {
          if(strcmp($data['item']->item_logistic[$i]->logistics_type, "location_pickup") == 0)
          {
          $serialized .= strtolower($data['item']->item_logistic[$i]->logistics_times);
          }
          }
          if($serialized != '')
          {
          echo
          '

          <!- conditional display ->

          <div class="pickup-from-items-location">
          <div class="timings">

          <!- conditional display ->

          <div class="icons_text">


          ...


诀窍是在
上设置
显示：none
。当它为空时，从项目位置拾取
，并控制
。从项目位置拾取
和
之间的间隙。使用
之间的
空格将
传递到我的位置，以便
。传递到我的位置
在
。从项目位置拾取
被隐藏

我在下面创建了一个示例，通过剥离php代码使事情变得简单，并做了以下更改来演示如何工作。希望能有帮助

CSS:已将
的
对正内容：
的值更改为
之间的
空格

CSS：从
中删除
右边距
和
左边距
。分别从项目位置
和
拾取。交付到我的位置
，以便它们之间的间距由上面第1点中设置的值控制
CSS：添加了一个名为
togglePFIL
的新类样式，可用于打开和关闭
从项目位置拾取的显示

JS：创建了一个新函数
togglePFIL（）
，该函数可用于切换
从项目位置拾取的显示。您需要从php代码中调用此函数。该按钮仅用于演示该功能的使用

注意：JS代码的质量不适合生产。你需要重写它以适应你的特殊情况。示例代码仅用于演示如何控制2个div的显示


函数togglePFIL（）{
const pfil=document.getElementsByClassName（'pick-from-items-location'）[0]；
pfil.classList.toggle（'togglePFIL'）；
}
。已收到{
位置：相对位置；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：之间的空间；
/*中心*/
}
.从物品位置取货{
/*右边距：100px*/
边缘顶部：50px；
}
.togglePFIL{
显示：无；
}
.送到我的位置{
/*左边距：100px*/
边缘顶部：50px；
}

从项目位置取货
PFIL计时
送到我的位置
DTML计时

切换PFIL
诀窍是在
上设置
显示：none
。当它为空时，从项目位置拾取
，并控制
。从项目位置拾取
和
之间的间隙。使用
之间的空格
传递到我的位置
，以便
。传递到我的位置
在
。从项目位置拾取
被隐藏

我在下面创建了一个示例，通过剥离php代码使事情变得简单，并做了以下更改来演示如何工作。希望能有帮助

CSS:已将
的
对正内容：
的值更改为
之间的
空格

CSS：从
中删除
右边距
和
左边距
。分别从项目位置
和
拾取。交付到我的位置
，以便它们之间的间距由
<div class="pickup-from-items-location" id="pickup_from_items_location" style="display:none">

var c = document.getElementsByClassName("pickup-from-items-location");

for (var i = 0; i < c.length; i++) {

var timing = c[i].children[0]

if (timing.innerText == "")

for (var i = 0; i < c.length; i++) {
    var timing = c[i].children[0]
    if (timing.innerText == "") {
        c[i].style.display = "none";
    }
}

c[i].parentNode.style.justifyContent = 'left';

var c = document.getElementsByClassName("pickup-from-my-location");

c[i].parentNode.children[1].style.marginLeft = 0

c[i].parentNode.children[0].style.marginRight = 0

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">

.hide{
    display: none;
}

.show{
    display: block;
}

</style>
<body>

    <div class="received">
        <div class="pickup-from-items-location **<?=count($data['item']->item_logistic?'show':'hide'?>**">
            <div class="timings">
            </div>
        </div>

        <div class="deliver-to-my-location">
            <div class="timings">
            </div>
        </div>
    </div>
</body>
</html>

<div class="received">
  <?php
    $serialized = '';
    for ($i = 0; $i < count($data['item']->item_logistic); $i++) {
        if (strcmp($data['item']->item_logistic[$i]->logistics_type, "location_pickup") == 0) {
            $serialized .= strtolower($data['item']->item_logistic[$i]->logistics_times);
        }
    }
    if ($serialized != '') {
  ?>
   <div class="pickup-from-items-location">
      <div class="timings">
        <?php
          echo $data['item'];

          echo '<div class="icons_text">
                    <img src="/images/rsz_venueorange__1_.png">
                    <p class="mt-4 mb-3 heading_size">pickup from item\'s location </p>
                    </div>';
          /*
          echo '<span class="font-weight-bold how-can-this-text">' . "how can this item be received" . '</span>';
          echo "<br>";
          echo "<br>";
          echo '<span class="font-weight-bold mb-3 ml-3">' . "pickup from item's location <br/>" . '</span>';
          echo "<br>";
          echo "<br>"; */
          $unserialized = unserialize($serialized);


          foreach ($unserialized as $key => $value) {
              echo '
                    <div class="dates_timings_items_availability">
                    <div class="items_availability_weekdays">' . strtolower(date('l', strtotime($key))) . ':</div>
                    <div class="items_availability_time"><span>' . $value['start'] . '</span></div>
                    <div class="delimiter">to</div>
                    <div class="items_availability_time"><span>' . $value['end'] . '</span></div>
                    </div>';
          }
    ?>
     </div>
   </div>
 <?php } ?>
   <!-- how can this item be received + PICKUP from item's location (FINISH) -->
   <!--DELIVER to my location (START)-->
   <?php
     $serialized = '';
     for ($i = 0; $i < count($data['item']->item_logistic); $i++) {
         if (strcmp($data['item']->item_logistic[$i]->logistics_type, "delivery") == 0) {
             $serialized .= strtolower($data['item']->item_logistic[$i]->logistics_times);
         }
     }
     if ($serialized != '') {
  ?>
   <div class="deliver-to-my-location">
      <div class="timings">
        <?php
              echo '<div class="icons_text">
                      <img src="/images/rsz_deliveryicon__1_.png">
                      <p class="mt-4 heading_size mb-3" style="width:100%;">deliver to my location </p>
                      </div>';
              /*
              echo "<br>";
              echo "<br>";
              echo '<span class="font-weight-bold mb-3 ml-3">' . "deliver to my location <br/>" . '</span>';
              echo "<br>";
              echo "<br>"; */
              $unserialized = unserialize($serialized);

              foreach ($unserialized as $key => $value) {
                  echo '
                      <div class="dates_timings_items_availability">
                      <div class="items_availability_weekdays">' . strtolower(date('l', strtotime($key))) . ':</div>
                      <div class="items_availability_time"><span>' . date('g:i a', strtotime($value['start'])) . '</span></div>
                      <div class="delimiter">to</div>
                      <div class="items_availability_time"><span>' . date('g:i a', strtotime($value['end'])) . '</span></div>
                      </div>';
              }

        ?>
     </div>
   </div>
 <?php } ?>
</div>

.received {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* -webkit-box-pack: center; */
    /* -ms-flex-pack: center; */
    /* justify-content: center; */
}

 .float-left{
    float:left !important;
  }
 .float-right{
    float:right !important;
  }

   //$empty  is a variable that stores the state of empty or non-empty

   if($empty){
     echo "<div class=\"pickup-from-items-location float-right\">";
   }else{
      echo "<div class=\"pickup-from-items-location\">";
   }

  if(!$empty){
    echo "<div class=\"deliver-to-my-location\">";
  }else{
    echo "<div class=\"deliver-to-my-location float-left\">";
  }

   ///jquery
   //Check if the div is empty


   if ('.pickup-from-items-location').is(':empty')){
       //append the class to float to right
       $(".deliver-to-my-location").addClass("float-right");
       $(".pickup-from-items-location").addClass("float-left");
   }