Question

我在这里设置了一个网站：http://liamwli.co.uk/ggsim

在底部，有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 &pound5 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>&copy;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> &amp; 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;
}

Answer 1

.container .footer .copyright {
width: 45%;
margin: 0 10px;
float: left;
text-align: center;
}

哦，在页脚中，在最后一个版权之后再添加一个div

<div class="cls"></div>

并将其设为这样：

.cls{
clear:both;
}

请求后

编辑。

<div class="footer">
   <div class="copyright" id="cp1">copyright 1</div>
   <div class="copyright" id="cp2">other copright</div>
   <div class="cls"></div>
</div>

式：

.footer div#cp1{float:left; width:40%;}
.footer div#cp2{float:right; width:40%;}
.cls{clear:both;}

这应该让你到那儿。

Answer 2

试试这段代码：

<div class="copyright">
  <em>&copy;2012</em> - <em>
   <div style="float:left;"><a href="http://webs.aboutcher.co.uk" title="Adam Boutcher Web Design">Adam Boutcher</a></div>, <div style="float:right;"><a href="http://ggsim.co.uk" title="ggsim">ggsim.co.uk</a> &amp; editied by Liam Williams</div></em>
</div>

我已将两位包裹到不同的div中并将两个div分配给不同的浮点数，这可能对您有所帮助。

Answer 3

类.copyright设置为width：75％：这将使您的请求无法进行。如果将它们更改为宽度：49％;你可以实现你想要的目标。

CSS：在同一行上有2位文本，左右对齐？

3 个答案: