PHP中的PHP回声

Question

I have a PHP script which echos in a div, which had another div inside of it. I am stumped, and I want to know how to make the second div seperate from the first one, so that one will be on one side and the other on the other side.

Here's the 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>'; 

Here's the 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

You can just end the first div before you define the other div to separate them. For example:

<?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>';
    }
    }
?>

Or if you wanted to keep the <p> inside the one 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>';
    }
?>

Then, if you want them to be side by side, add display: inline-block to each 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;
}