1
我已經在這裏建立了一個網站：http://liamwli.co.uk/ggsimCSS：在同一行上有兩位文字，左右對齊？
在底部，有2位'頁腳'文本。他們應該在同一條線上，但我無法實現這一點。
我使用的模板，別人已經取得。
我已經到處看，我只是無法找到一個方法來做到這一點 - 這可能嗎？
下面是代碼：
HTML/PHP文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta name="keywords" content="giffgaff sim"/>
<meta name="author" content="Adam Boutcher, giffgaff"/>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<title>Order a free sim!</title></head>
<body>
<div class="top">
<div class="center">
<img src="img/logo.png" alt="logo here"/>
</div>
</div>
<div class="container">
<div class="content">
<div class="header">
<img class="logo" src="img/logo2.png" alt="icon 75x75" height="75px" width="75px"/>
<h1>Order a sim or micro-sim!</h1>
<p>Thanks for choosing to join giffgaff!</p>
<p>Please choose either a micro-sim, or a normal sim below :)</p>
</div>
<div class="leftside">
<h1>About</h1>
<p>Giffgaff is a small MVNO, that runs on the o2 mobile network. By joining from this page, you will receive £5 bonus
credit when you activate your sim at <a href="http://giffgaff.com">giffgaff.com</a>!</p>
<br>
<hr>
<p><div align="center"><!-- Counter Code START --><a href="http://www.e-zeeinternet.com/" target="_blank"><img src="http://www.e-zeeinternet.com/count.php?page=785560&style=plain_b&nbdigits=9" alt="HTML Hit Counter" border="0" ></a><br><a href="http://www.e-zeeinternet.com/" title="HTML Hit Counter" target="_blank" style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; text-decoration: none;">HTML Hit Counter</a><!-- Counter Code END --></div></p>
</div>
<?php
if (isset($_GET['error'])){
if ($_GET['error'] == "1"){
echo "<div class=\"rightside\" style=\"background:#1C1C1C;color:#FFF;\"/>";
echo "<h1><div align=\"center\" style=\"color:red\">An error occured!</div></h1>";
echo "<p><div align=\"center\"style=\"color:red\">Please <a href=\"http://liamwli.co.uk/ggsim\">go to the main page</a> :)</div></p>";
echo "</div>";
}}
?>
<div class="rightside" style="background:#1C1C1C;color:#FFF;">
<h1>Please place your order using the buttons below :)</h1>
<p>You must choose micro-sim if you have an iPhone 4 (or above), an iPad (or above), and some newer Nokia's.</p>
</div>
<div class="rightside">
<h1>Order Now!</h1>
<p><div align="center" style="color:red">Notice: If you already have an active giffgaff sim card, then you <b>CONNOT</b> order one here. If you require a micro-sim, you will have to cut your sim down!</div></p>
<p>
<form action="process.php" method="post">
<div align="center"><input type="submit" value="Order a micro sim" id="micro" name="micro">
<input type="submit" value="Order a sim" id="norm" name="norm"></div>
</form>
</p>
</div>
<div class="clear"><!-- Keep this after using leftside/rightside --></div>
</div>
<div class="footer">
<div class="copyright">
<em>©2012</em> - <em><a href="http://webs.aboutcher.co.uk" title="Adam Boutcher Web Design">Adam Boutcher</a>, <a href="http://ggsim.co.uk" title="ggsim">ggsim.co.uk</a> & editied by Liam Williams</em>
</div>
<div class="copyright">
<div style="text-align:left">
<em>This is not an official giffgaff website. It is a fan website only!</em>
</div>
</div>
</div>
</div>
</body>
</html
CSS文件：
/* Hand-made CSS
* @author Adam Boutcher
* @web webs.aboutcher.co.uk
* @desc CSS to go with the giffgaff HTML template. This is entirely hand made and only borrowed images from giffgaff.com
*/
html, body {
font-family: Verdana, Geneva, sans-serif;
font-style: normal;
font-weight: normal;
text-align: left;
background: #000;
}
h1, h2, h3, h4, h5, h6 {
font-style: normal;
font-family: arial;
font-weight: bold;
white-space: normal;
padding-bottom:12px;
}
h1 {
line-height:36px;
font-size:18pt;
}
p {
font-family: Arial, sans-serif;
}
a {
color: #FF991B;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
/* Basic Layout */
.top {
background: #000;
margin:5px auto;
width: 100%;
color: #000;
text-align:left;
}
.top .center {
margin:0px auto;
width: 75%;
}
.top .center img {
display: block;
border: 0px;
}
.container {
width: 100%;
min-width: 75%;
min-height: 70%;
background: #000 url('img/background_plus.gif') right top;
}
.clear { clear: both;}
/* Container */
.container .content {
margin:0px auto;
height: 95%;
width: 75%;
min-width: 600px;
color: #3c3c3c;
overflow: none;
padding-top:5px;
min-width: 500px;
padding-bottom: 2%;
/* Add some pretty dots in the background!*/
}
.container .content .header {
color: #FFF;
width: 100%;
height: auto;
text-align:left;
position:relative;
text-indent:0;
background: #1C1C1C;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
min-width: 500px;
margin-top:10px;
padding: 5px 0px;
padding-bottom: 10px;
font-size: 11pt;
}
.container .content .rightside {
background: #FFF;
margin-top: 2%;
width: 68%;
height: auto;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align:left;
float: right;
margin-left: 2%;
display:inline;
font-size: 9pt;
}
.container .content .leftside {
float: left;
background-color: #FFF;
margin-top: 2%;
width: 30%;
height: auto;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align:left;
font-size: 9pt;
}
.container .content .leftside table {
padding-left: 10px;
padding-right: 0px;
}
.container .content .middle {
background-color: #FFF;
margin-top: 2%;
width: 100%;
height: auto;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align:left;
padding: 1px;
}
.container .footer {
background: #000;
font-size: 11px;
color: #FFF;
width: 100%;
height: 20px;
text-align:right;
margin-top: 1%;
}
.container .footer .copyright {
width: 75%;
margin: 0px auto;
}
/* CUSTOM TEXT */
.container .content p, h1, h2, h3, h4, h5, h6, pre, table {
padding-left: 15px;
padding-right: 15px;
padding-bottom:0px;
}
.container .content .header h1 {
margin:0;
padding-left:130px;
padding-top:10px;
padding-bottom:0px;
}
.container .content .header p {
margin:0;
padding-left:130px;
}
/* MISC */
img {
border: 0;
}
.content .header img.logo {
left:30px;
margin:0;
position:absolute;
top:20px;
}
table {
width:100%;
font-size: 9pt;
}
.content th {
font-size: 12px;
text-align: left;
}
我仍然無法得到它的工作:( – 2012-03-24 08:54:15
我想要一個部分在右邊，一個部分在左邊，在同一條線上。 – 2012-03-24 08:54:38