Question

我有一个PHP脚本，它在div中回显，其中有另一个div。我很难过，我想知道如何使第二个div与第一个div分开，这样一个将在一侧，另一个在另一侧。

这是PHP

  echo '<div class="viewpost">';
  while ($row = mysqli_fetch_array($data)) {
  if(!empty($row['first_name'])) {
      echo '<div class="vpside">';
      echo '<p>Name:' . $row['first_name'] . '</p>';
    }
  if(!empty($row['gender'])){
    echo '<p>Gender: ' . $row['gender'] . '</p>';
    echo '</div>';
  }
  if(!empty($row['post'])) {
      echo '<p class="vpside1">Post:</p><p class="viewpost1">' . $row['post'] . '</p>';
    }
    }
  echo '</div>';

这是CSS

.vpside {
    height:100%;
    width:12%;
    display:block;
    border-right:5px solid white;
    border-bottom:5px solid white;
    border-top:5px solid white;
}

.vpside1 {
    width:10%;
    border-right:5px solid white;
    border-bottom:5px solid white;
    border-top:5px solid white;
}

.viewpost {
    margin-bottom:25px;
    background-color: #000;
    border: 5px solid white;
    border-radius:10px;
}

p.viewpost {
    background-color: #000;
}

.viewpost1 {
    border-bottom: 5px solid white;
    }

Answer 1

在定义另一个div以分隔它们之前，您可以结束第一个div。例如：

<?php
  echo '<div class="viewpost">';
  echo '</div>'; //Bottom line moved here
  while ($row = mysqli_fetch_array($data)) {
  if(!empty($row['first_name'])) {
      echo '<div class="vpside">';
      echo '<p>Name:' . $row['first_name'] . '</p>';
    }
  if(!empty($row['gender'])){
    echo '<p>Gender: ' . $row['gender'] . '</p>';
    echo '</div>';
  }
  if(!empty($row['post'])) {
      echo '<p class="vpside1">Post:</p><p class="viewpost1">' . $row['post'] . '</p>';
    }
    }
?>

或者，如果您想将<p>保留在一个div中：

<?php
  while ($row = mysqli_fetch_array($data)) {
  if(!empty($row['first_name'])) {
      echo '<div class="vpside">';
      echo '<p>Name:' . $row['first_name'] . '</p>';
    }
  if(!empty($row['gender'])){
    echo '<p>Gender: ' . $row['gender'] . '</p>';
    echo '</div>';
  }
  echo '<div class="viewpost">';
  if(!empty($row['post'])) {
      echo '<p class="vpside1">Post:</p><p class="viewpost1">' . $row['post'] . '</p>';
    }
    echo '</div>';
    }
?>

然后，如果您希望它们并排，请将display: inline-block添加到每个div：

.vpside {
    height:100%;
    width:12%;
    display: inline-block; /*changed from display: block*/
    border-right:5px solid white;
    border-bottom:5px solid white;
    border-top:5px solid white;
}

.vpside1 {
    width:10%;
    border-right:5px solid white;
    border-bottom:5px solid white;
    border-top:5px solid white;
}

.viewpost {
    margin-bottom:25px;
    background-color: #000;
    border: 5px solid white;
    border-radius:10px;
    display: inline-block; /*added*/
}

p.viewpost {
    background-color: #000;
}

.viewpost1 {
    border-bottom: 5px solid white;
}

PHP中的PHP回声

1 个答案: