PHP 在 CSS 中回显

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到每个分区:

.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;
}