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

【问题标题】：How to shift right div towards the left when left div is empty on run time?当左 div 在运行时为空时，如何将右 div 向左移动？
【发布时间】：2018-08-23 01:12:58
【问题描述】：

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

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

这里 left div 是 <div class="pickup-from-items-location"> 和 right div 是<div class="deliver-to-my-location">。

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

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

          [[LEFT]                                              [RIGHT]]

Left Div 是<div class="pickup-from-items-location">，Right Div 是<div class="deliver-to-my-location">

所以当Left Div 为空时，Right Div 应该向左移动。

          [[RIGHT]]

【问题讨论】：

看看这是不是你要找的，这是一个虚拟的例子 - jsfiddle.net/bkec09ha/21

标签： php html css runtime

【解决方案1】：

按照上面@Serg 的回答，我认为您误解了他的回答。我完全同意。本质上，您当前的代码始终显示两个<div>，但如果没有内容，您想隐藏已经显示的<div>。这没有多大意义，您可以轻松阻止该步骤。而是让您的 PHP 脚本确定没有内容，并在 <div> 之外设置 if 语句，以便它仅在有内容时显示（由 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; */
}

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

【讨论】：

我将您的更改推送到我的代码中。单击此处的handoff 部分。此时推送更改后，当左侧 div 为空时，右侧 div 位于中心。当 left div 为空 时，有什么方法可以将 right div 向左推？
我想我们现在需要做一些造型，不确定。如果你愿意，我可以发送完整的移交代码。
@john 你是对的，现在只是将其设置为你想要的样式。我正在用 CSS 代码更新我的答案，以防止它自己居中。
我已接受您的回答并授予赏金。我有一个与particular url 相关的网站相关的快速问题。底部的页脚内容（带有大 U 标志）没有完整的填充，但如果您检查类似的网址 1 和 2，页脚没有任何填充。
@john，好吧，我想你误解了我的意思。我想说的是您编译的代码缺少元素。这意味着您的if 语句很可能在if 之外有一个开始标记，在if 中有一个结束标记（就是这种情况），或者在if 内部有一个开始标记，在@ 之外有一个结束标记987654338@。我已在此处上传更改：codepad.org/QYYtaIg0。您会注意到它大约更改了 2-3 行。

【解决方案2】：

这里最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">


          ...

【讨论】：

您阅读我的问题陈述了吗？它会回答你的问题。
序列化字符串为空时，不会进入左右div。这就是我正在使用的逻辑。希望它能回答你的问题。
你在吗？
@john 这是一个反问。我不是在问什么，我是在说 - 如果 html 是空的，就不要渲染它，那么你就不必使用 js 或 css 来解决这个问题。
在.received 上更改justify-content: left; 并从.deliver-to-my-location 中删除margin-left。仅在隐藏的列上设置margin-right。这样，当显示列时，它会将另一列推开。

【解决方案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;
}

【讨论】：

我已经尝试过上面的代码。它似乎不起作用。
这里是直播website点击切换。
on hand off section，当左侧部分为空时，我希望右侧位于中心，反之亦然。当右侧部分为空时，我希望左侧位于中心，反之亦然
你在吗？我在现场网站上做了些微改动。我使用的代码不是真实的。
你在吗？

【解决方案4】：

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

HTML

JavaScript

   <script>
     function myFunction() {

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

【讨论】：

【解决方案5】：

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

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

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

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

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

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

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

.togglePFIL {
  display: none;
}

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

<div class="received">
  <div class="pickup-from-items-location">
    PICKUP FROM ITEMS LOCATION
    <div class="timings">
      PFIL TIMINGS
    </div>
  </div>
  <div class="deliver-to-my-location">
    DELIVER TO MY LOCATION
    <div class="timings">
      DTML TIMINGS
    </div>
  </div>
</div>
<p>
  <button onclick="togglePFIL()">Toggle PFIL</button>

【讨论】：

根据您在下面创建的其中一个 cmets 并查看指向您网站的链接，在您的情况下，“space-around”的值可能比“space-between”更合适。跨度>

【解决方案6】：

如果以这种方式开发 css，那么如果隐藏左 div 而不是右 div 将向左移动，那么这将正常工作。

如果左侧 div 中没有数据，添加类 hide 以便从 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>

【讨论】：

【解决方案7】：

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

既然你想要runtime解决方案，那我就跳过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 的每个孩子都有左边距或右边距。这导致当其他孩子被移除时的不对称定位。我在 JS 中看到了一个修复：

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

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

还有一个

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

【讨论】：

【解决方案8】：

创建一个具有左浮动和右浮动的类。当您的代码运行并到达您要检查其是否为空的块时，附加类 float-left 或 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\">";
  }

使用 vanilla 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 : 在检查空之前删除/修剪任何空格

【讨论】：