我希望将提交的表单数据附加到最新的表单数据中。在我添加CSS之前，表单数据按顺序正好附加，但在右侧。我想在中间添加漂亮的边框。这是PHP和CSS。现在它看起来有点中间有漂亮的边框，但文本显示在上一个提交的表单文本的顶部。
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Explore</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link id="page_favicon" href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- Optional theme -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="index.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="ddslick.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/40036711/Scripts/ddslick.js"></script>
<script type="text/javascript" src="searchlist/src/jquery-customselect.js"> </script>
<link rel="stylesheet" type="text/css" href="searchlist/src/jquery-customselect.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="timeago.js"></script>
<!-- GOOGLE API IMPORTANT -->
<link rel="stylesheet" href="main.css">
</head>
<body>
<ol class="breadcrumb" style="position: fixed; width:100%; z-index: 1000;">
<li><a href="index.php"> <span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>
<li><a href="vtsearch.php"><span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span> Hokie Passport</a></li>
<li><a href="imageSearch.html"> <span class="glyphicon glyphicon-picture" aria-hidden="true"></span> Photos</a></li>
<li><a href="weather.php"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> Weather</a></li>
</ol>
<div id="allContent" >
<div id="formData" >
<input class="button-warning pure-button" style ="position: fixed; bottom: 0px;"title="Clear page content"type="submit" name="clear" id="clearbtn" value="Clear">
<?php
#FOR THE DRIVERS ONLY
if (!isset($_SESSION['inputs'])) {
// initialize the saved input session variable the first time
$_SESSION['inputs'] = array();
}
if (isset($_POST['name']) || isset($_POST['nameTwo'])) {
array_push($_SESSION['inputs'], $_POST);
}
foreach (array_reverse($_SESSION['inputs']) as $input) {
if(isset($input['desiredNum']))
{
echo " <span class='trip'> <p class='driverAlert' > DRIVER </p> <img src='taxi.png' width ='50' height='50'title='driver'> {$input['name']}, Age: {$input['age']} <br> To: {$input['arriveLoc']} - From: {$input['departLoc']}<br>
Leaves: {$input['departDate']} Returns: {$input['returnDate']} <br> Will drive up to: {$input['desiredNum']} people
<br> Contact @ {$input['email']} <br> <br> </span>
";
}
else
{
echo " <span class='trip'> <p class='riderAlert' > PASSENGER </p> <img src='rider.png' width ='50' height='50'title='rider'> {$input['nameTwo']}, Age: {$input['ageTwo']} <br> Would like to go to {$input['departLocTwo']} from {$input['arriveLocTwo']} on {$input['departDateTwo']} and return on
{$input['returnDateTwo']} <br> Contact @ {$input['emailTwo']} <br> <br></span>
";
}
}
?>
</div>
<!-- States selector -->
<div id="rider">
<input class="button-success pure-button" type="button" id="riderbtn"value="Passenger"> <br>
<form action="vt.php" id="riderForm" method="post" class="form-inline">
<div class="form-group">
<input required type="text" class="form-control input-sm" required id="nameTwo" name="nameTwo" placeholder="Enter Name" autocomplete="off">
</div><br> <br>
<div class="form-group">
<input type="text" class="form-control input-sm" id="ageTwo" required name="ageTwo" placeholder="Enter Age" autocomplete="off">
</div> <br> <br>
<div class="form-group">
<input type="text" class="form-control input-sm" id="departLocTwo" required name="departLocTwo" autocomplete="off" placeholder="Departure Location">
</div><br> <br>
<div class="form-group">
<input type="text" class="form-control input-sm" id="arriveLocTwo" required name="arriveLocTwo" autocomplete="off"placeholder="Destination Location">
</div><br> <br>
<div class="form-group">
<input type="date" class="form-control input-sm" id="departDateTwo" required name="departDateTwo" autocomplete="off" placeholder="Depart Date">
</div><br> <br>
<div class="form-group">
<input type="date" class="form-control input-sm" id="returnDateTwo" required name="returnDateTwo" autocomplete="off" placeholder="Return Date">
</div> <br> <br>
<div class="form-group">
<input type="email" class="form-control input-sm" id="emailTwo" required name="emailTwo" autocomplete="off" placeholder="Email">
</div><br> <br>
<input class="btn btn-default" type="submit" value="Submit" onclick="submitRider();">
</form>
</div>
<div id="driver">
<input type="button" class="button-success pure-button" id="driverbtn"value="Driver">
<form action="vt.php" id="driverForm" method="post" class="form-inline">
<select class="form-control" id="desiredNum" name="desiredNum">
<option disabled>How many people may you drive?</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
</select>
<br> <br>
<div class="form-group">
<input required type="text" class="form-control " id="name" required name="name" autocomplete="off" placeholder="Enter Name">
</div><br> <br>
<div class="form-group">
<input type="text" class="form-control " id="age" name="age" required autocomplete="off" placeholder="Enter Age">
</div> <br> <br>
<div class="form-group">
<input type="text" class="form-control " id="depart" name="departLoc" required autocomplete="off" placeholder="Departure Location">
</div><br> <br>
<div class="form-group">
<input type="text" class="form-control " id="arrive" name="arriveLoc" required autocomplete="off"placeholder="Destination Location">
</div><br> <br>
<div class="form-group">
<input type="date" class="form-control " id="departDate" name="departDate" required autocomplete="off"placeholder="Depart Date">
</div><br> <br>
<div class="form-group">
<input type="date" class="form-control " id="returnDate" name="returnDate" autocomplete="off" required placeholder="Return Date">
</div> <br> <br>
<div class="form-group">
<input type="email" class="form-control " id="email" required name="email" autocomplete="off" placeholder="Email">
</div><br> <br>
<input class="btn btn-default" type="submit" value="Submit" onclick="submitDriver();">
</form>
</div>
</div>
</body>
<script type="text/javascript">
$('#driverbtn').click(function()
{
$('#driverForm').toggle();
});
$('#riderbtn').click(function()
{
$('#riderForm').toggle();
});
$('#clearbtn').click(function()
{
$.post('clear.php', function()
{window.location = window.location.href;});
});
</script>
<script type="text/javascript">
$(document).ready( function(){
$('#states').ddslick();
});
</script>
<!--- End of rider data -->
</html>
.driverAlert
{
color: green;
}
.riderAlert
{
color:red;
}
body
{
background-color: white;
}
#allContent div
{
width: 33%;
position: relative;
float: left;
}
body
{
overflow-y: scroll;
}
#riderForm
{
display: none;
}
#driverForm
{
display: none;
}
#driverbtn
{
margin-top: 20px;
margin-bottom: 22px;
}
#riderbtn
{
margin-top: 20px;
margin-bottom: 22px;
}
#rider
{
position: fixed;
right: -450px;
}
#driver
{
position: fixed;
right: -200px;
}
#options
{
text-align: center;
}
.trip{
position: fixed;
top: 250px;
right:250px;
display: inline-block;
padding: 16px;
margin: 10px 0;
max-width: 468px;
border: #ddd 1px solid;
border-top-color: #eee;
border-bottom-color: #bbb;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
font: bold 14px/18px Helvetica, Arial, sans-serif;
color: #000;
}