我正在编写PHP脚本，当我在HTML中运行输出时，单元格中的图像位于页面顶部。我正在使用HTML中的表格，我试图将图像放在自己的单元格中，但仍然会到达页面顶部。我想这可能是因为我得到了一些可能干扰它的CSS代码。此页面仍在进行中。
<html>
<head>
<style>
h1 {
background-color: orange;
font-family: "Times New Roman", Times, serif;
font-size: 40px;
}
p {
background-color: rgb(255,0,0);
}
img {
float: right;
margin: -250 850 10px 10px;
}
table, th, td {
border-bottom: 1px solid black;
border-left: none;
border-right: 1px solid black;
border-top: none;
border-collapse: collapse;
}
</style>
</head>
<body>
<h1><b><i>WEATHER CHIPMUNK</i></b></h1>
<p> </p>
<!DOCTYPE html>
<html lang="en">
<head>
<title>WeatherChipmunk</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"onclick=parent.location="index.php">HOME</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="#asdfasdfasdf" onclick=parent.location="City.php"> CURRENT WEATHER </a></li>
<li><a href="#casdfasdf" onclick=parent.location="PastWeatherScreen.php"> WEATHER RECORDS </a></li>
<li><a href="#asdfasdf" onclick=parent.location="StatsInfoScreen.php"> WEEKLY STATISTICS </a></li>
<!-- <li><a href="#news" onclick=parent.location="fillPast.php"> fill past table </a></li> -->
<!-- <li><a href="#news" onclick=parent.location="fillForecast.php"> fill forecast table </a></li> -->
</div>
</div>
</nav>
<div class="container">
</div>
<select name=citySelection value=''>Select City...</option><option value=1>Spartanburg</option><option value=2>Greenville</option><option value=3>Rock_Hill</option><option value=4>Columbia</option><option value=5>Myrtle_Beach</option><option value=6>Charleston</option><option value=7>Charlotte</option><option value=8>Asheville</option><option value=9>Wilmington</option><option value=10>Raleigh</option><option value=11>Greensboro</option></select> <br><br>
<table style="width:100%">
<tr>
<td><img src="http://icons.wxug.com/i/c/k/nt_tstorms.gif" alt="W3Schools.com" style="float:left;"</img></td>
<td>Thursday Night Temp: 52 ˚F<br>nt_tstorms <br> Prep: 80 % <br> </td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：0)
我已将代码分为两部分（一部分靠近顶部，另一部分靠近底部）。根据我的理解，您希望图像在单元格内正确对齐，因此text-align: right;在td.image CSS中。
您可能还想检查打开/关闭代码的顺序，例如<html>和<body>，因为那里还有一些错误。
<html>
<head>
<style>
h1 {
background-color: orange;
font-family: "Times New Roman", Times, serif;
font-size: 40px;
}
p {
background-color: rgb(255,0,0);
}
/*** CODE HAS BEEN CHANGED HERE ***/
td.image {
text-align: right;
}
table, th, td {
border-bottom: 1px solid black;
border-left: none;
border-right: 1px solid black;
border-top: none;
border-collapse: collapse;
}
</style>
</head>
<body>
<h1><b><i>WEATHER CHIPMUNK</i></b></h1>
<p> </p>
<!DOCTYPE html>
<html lang="en"> <!-- *** Why is a new html tag entered here? *** -->
<head>
<title>WeatherChipmunk</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"onclick=parent.location="index.php">HOME</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="#asdfasdfasdf" onclick=parent.location="City.php"> CURRENT WEATHER </a></li>
<li><a href="#casdfasdf" onclick=parent.location="PastWeatherScreen.php"> WEATHER RECORDS </a></li>
<li><a href="#asdfasdf" onclick=parent.location="StatsInfoScreen.php"> WEEKLY STATISTICS </a></li>
<!-- <li><a href="#news" onclick=parent.location="fillPast.php"> fill past table </a></li> -->
<!-- <li><a href="#news" onclick=parent.location="fillForecast.php"> fill forecast table </a></li> -->
</div>
</div>
</nav>
<div class="container">
</div>
<select name=citySelection value=''>Select City...</option><option value=1>Spartanburg</option><option value=2>Greenville</option><option value=3>Rock_Hill</option><option value=4>Columbia</option><option value=5>Myrtle_Beach</option><option value=6>Charleston</option><option value=7>Charlotte</option><option value=8>Asheville</option><option value=9>Wilmington</option><option value=10>Raleigh</option><option value=11>Greensboro</option></select> <br><br>
<table style="width:100%">
<tr>
<!-- *** CODE HAS BEEN CHANGED HERE *** -->
<td class="image"><img src="http://icons.wxug.com/i/c/k/nt_tstorms.gif" alt="W3Schools.com"</img></td>
<td>Thursday Night Temp: 52 ˚F<br>nt_tstorms <br> Prep: 80 % <br> </td>
</tr>
</table>
</body>
</html>
答案 1 :(得分：0)
您的代码有很多错误。最引人注目的是body和html标签的展示位置。此外，你的选项和img标签也被错误地放置了
img tag -
<td><img src="http://icons.wxug.com/i/c/k/nt_tstorms.gif" alt="W3Schools.com" style="float:left;"></td>
选项标记 -
<select name=citySelection value=''>Select City...
<option value=1>Spartanburg</option>
<option value=2>Greenville</option>
<option value=3>Rock_Hill</option>
<option value=4>Columbia</option>
<option value=5>Myrtle_Beach</option>
<option value=6>Charleston</option>
<option value=7>Charlotte</option>
<option value=8>Asheville</option>
<option value=9>Wilmington</option>
<option value=10>Raleigh</option>
<option value=11>Greensboro</option>
</select>
这是jfiddle - https://jsfiddle.net/