Question

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

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

此处左div 是<div class="pickup-from-items-location">，右div 是<div class="deliver-to-my-location">。

<div class="timings">是左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代码为：

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

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

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

问题陈述：

我想知道应该在上面的 css代码或我需要添加的JS / Jquery代码中进行哪些更改，以便运行时左div为空，右div应该向左移动。

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

由于$ serialized字符串为null时，<div class="pickup-from-items-location"> <div class="timings">为空，因为我在上面使用了if($serialized != '')条件。

          [[LEFT]                                              [RIGHT]]

左Div为<div class="pickup-from-items-location">，右Div为<div class="deliver-to-my-location">

因此，当 Left Div为空时，Right Div应该向左移动。

          [[RIGHT]]

Answer 1

这里最kiss的解决方案是更改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">


          ...

Answer 2

在上述@Serg的回答之后，我认为您误解了他的回答。我完全同意。本质上，当前代码始终显示两个<div>，但是如果没有内容，您想隐藏已经显示的<div>。那没有多大意义，您可以轻松地阻止该步骤。而是让您的PHP脚本确定没有内容，并在if外部设置<div>语句，以便仅在有内容时显示（由if($serialized != '')指定）。我已将该更改应用到下面的代码中，请尝试。

<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; */
}

注释掉底部的3种样式，就像我在.received选择器类上的样式一样。

Answer 3

只要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;
}

Answer 4

我不太清楚这个问题，但是我猜您正在使用“提交”按钮单击“提交”，在这种情况下为什么不使用JavaScript？

HTML

JavaScript

   <script>
     function myFunction() {

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

Answer 5

诀窍是将display: none上的.pickup-from-items-location设置为空，并使用.pickup-from-items-location控制.deliver-to-my-location和space-between之间的间隔，以使{{ .deliver-to-my-location隐藏时，1}}向左移动。

我通过剥离php代码使事情变得简单，在下面创建了一个示例，并进行了以下更改以演示其工作方式。希望对您有所帮助。

CSS：将.pickup-from-items-location的{{1}}的值更改为justify-content:
CSS：分别从space-between和.received中删除了margin-right和margin-left，以便它们之间的间距由上面第1点中设置的值控制。
CSS：添加了一种名为.pickup-from-items-location的新类样式，可用于打开和关闭.deliver-to-my-location的显示。
JS：创建了一个新功能togglePFIL，可用于打开和关闭.pickup-from-items-location的显示。您将需要从您的php代码中调用此函数。该按钮仅用于演示该功能的使用。

注意：JS代码的质量尚未投入生产。您将需要重写它以适合您的特定情况。该示例代码仅用于演示如何控制2格的显示。

togglePFIL()

.pickup-from-items-location

function togglePFIL() {
  const pfil = document.getElementsByClassName('pickup-from-items-location')[0];
  pfil.classList.toggle('togglePFIL');
}

Answer 6

我想知道应该在上面的CSS代码或需要添加的JS / Jquery代码中进行哪些更改，以便在运行时左div为空时，右div应该向左移动。

由于您需要运行时解决方案，因此我将跳过PHP调优，而使用JS和CSS。

简短答案：

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 == "") {
        c[i].style.display = "none";
        c[i].parentNode.style.justifyContent = 'left';
        c[i].parentNode.children[1].style.marginLeft = 0;
    }
}

c = document.getElementsByClassName("pickup-from-my-location");
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';
        c[i].parentNode.children[0].style.marginRight = 0;
    }
}

您可以轻松地验证此代码。转到live-site并将此代码放入控制台并运行。

说明

您在容器上使用了flex。因此，如果我们向其中一个孩子添加display:none，则另一个孩子将拥有整个区域。然后添加justify-content:left将一个元素向左对齐。

在您的live-site中，我看到一个空孩子只有

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

添加后，我们将拥有：

<div class="pickup-from-items-location" id="pickup_from_items_location" style="display:none">

要清楚一点，我们要做的就是检查是否有<div class="timings">内容为空，如果有，请将display:none添加到其父项。

要确定是否有这样的孩子，我们可以使用该JS代码；

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

由于它是一个列表，而不只是一个元素，因此我们必须迭代其中的每个元素，

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

之后，我们可以通过

访问<div class="timings">

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

我们可以通过以下方式查看其内容

if (timing.innerText == "")

要将display:block添加到空孩子：

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");

但是，CSS还有另一个问题。 flexbox的每个子代都具有margin-left或margin-right。当其他孩子被移走时，这导致不对称的定位。我用JS看到了一个解决方法：

添加display:none属性后，您可以从后继子项中删除margin / left / right。要访问后继者（具有内容的左右子元素）：

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

和另一个

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

Answer 7

如果css是用这种方式开发的，那么，如果隐藏左div而不是右div将向左走，那么它将正常工作。

如果左div中没有数据，请添加“隐藏”类，以便在CSS中将其隐藏，并且右跳将自动向左移动。

如果不是这种情况，请回复，以便我提供其他答案。

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

Answer 8

创建一个带有float-left和float-right的类。当代码运行并到达要检查其是否为空的块时，请添加类float-left或float float right。

在您的情况下，假设您的容器为空和div class =“ deliver-to-my-location float-left”>

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

在您的PHP代码中

   //$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\">";
  }

使用香草JS或jquery有更清洁的方法。我不太确定以下解决方案

   ///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");
   }

PS：在检查空白之前，删除/修剪所有空白

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

8 个答案:

简短答案：

说明