CSS左右拆分页脚
我知道如何一般做一个简单的浮动左和浮动右页脚,使我可以很容易地有信息的领域。但基本上我使用的是HTML5样板,我相信当我尝试拆分页脚时,由于之前应用的样式,它不起作用。现在我不是CSS专家,所以我需要一些帮助,告诉我如何在我的页脚中实现这个基本功能。其拆分为两个工具,左对齐和右对齐 下面是HTML和CSS。提前谢谢各位CSS左右拆分页脚,css,Css,我知道如何一般做一个简单的浮动左和浮动右页脚,使我可以很容易地有信息的领域。但基本上我使用的是HTML5样板,我相信当我尝试拆分页脚时,由于之前应用的样式,它不起作用。现在我不是CSS专家,所以我需要一些帮助,告诉我如何在我的页脚中实现这个基本功能。其拆分为两个工具,左对齐和右对齐 下面是HTML和CSS。提前谢谢各位 <!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head id="Head1"><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>
Upper Control Limit
</title><meta name="description" /><meta name="author" /><meta name="viewport" content="width=device-width" /><link rel="stylesheet" href="css/style.css" />
<script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site
in all its glory.</p><![endif]-->
<div id="header-container">
<header class="wrapper clearfix">
<h1 id="title">Upper Control Limit</h1>
<nav>
<ul>
<li><a href="default.aspx">Home</a></li>
<li><a href="contact.aspx">Contact</a></li>
</ul>
</nav>
</header>
</div>
<div id="main-container">
<form method="post" action="results.aspx?rows=1&cols=1" id="Form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjEwNDQyMTMxMw9kFgJmD2QWAgIDD2QWBgIFDw8WBB4IQ3NzQ2xhc3MFB0NvbEhlYWQeBF8hU0ICAmRkAgYPDxYEHwAFB1Jvd0hlYWQfAQICZGQCBw8PFgQfAAUJZ3JpZEJveGVzHwECAmRkZFJMwj+M1MRZQlpIMrfmxl1wwizJXzxaXt3WPYuj38Ui" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAU3pTMHOdDohz552i1I2Sebj31ljtDmerW1aPkEMZ51g8/Ho+MRtff8p07c9TjAQNmPZdj/gKuoitSwpD5a3CzSRHT3M0ARnCVeHCgDPQCHReQQJ8C8qTnXt96uJnOGYcQYMDuNwHVzarHWwfsDZ3nC" />
</div>
<div id="main" class="clearfix"><input type="submit" name="ctl00$btnCalc" value="Calculate" id="btnCalc" class="btn" /><input name="ctl00$txtrow_0_col_1" type="text" value="Col 1" id="txtrow_0_col_1" class="ColHead" /><input name="ctl00$txtrow_1_col_0" type="text" value="Series 1" id="txtrow_1_col_0" class="RowHead" /><input name="ctl00$txtrow_1_col_1" type="text" id="txtrow_1_col_1" class="gridBoxes" /></div></form>
</div> <!-- #main-container -->
<div id="footer-container">
<footer class="wrapper">
<h3 class="left">Copyright 2012 Data Exchange LTD</h3>
<h3 class="right">img here</h3>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/script.js"></script>
<script>
var _gaq = [['_setAccount', 'UA-17073042-4'], ['_trackPageview']];
(function (d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s)
} (document, 'script'));
</script>
</body>
</html>
h3.left{float:left;}
和
h3.right{float:right;}
看起来他们应该在做这项工作。您可以尝试将width:50%
添加到它们中
您可以使用firebug关闭影响h3元素的其他样式,看看这是否确实是问题所在吗?
h3.left{float:left;}
和
h3.right{float:right;}
看起来他们应该在做这项工作。您可以尝试将width:50%
添加到它们中
你能用firebug关闭影响h3元素的其他样式,看看这是否真的是问题所在吗?brains911所说的会有所帮助,但我也建议在
中加入一个
因此,您的代码如下所示:
<footer class="wrapper clearfix">
...
</footer>
...
如果这不合理,请告诉我。brains911所说的会有所帮助,但我也建议在
中加入a
因此,您的代码如下所示:
<footer class="wrapper clearfix">
...
</footer>
...
如果没有意义,请告诉我。尝试了宽度:50%,没有运气。我也这么想,这就是为什么我感到困惑。我必须安装FireBug,看看,但我最确定的是HTML5BP风格是相互冲突的,因为它们是生成的,我还没有编写它们,(尽管我可以看一下……lmao),它们可能以某种方式冲突。但是我只是简单地看了一下,在divs、wrapper、footer元素中没有看到任何样式:/尝试了宽度:50%,没有运气。我也这么想,这就是为什么我感到困惑。我必须安装FireBug,看看,但我最确定的是HTML5BP风格是相互冲突的,因为它们是生成的,我还没有编写它们,(尽管我可以看一下……lmao),它们可能以某种方式冲突。但我只是简单地看了一眼,在divs、wrapper和footer元素中没有看到任何样式化的东西:/Awesome,谢谢Kate。工作得很好,也感谢Brains911。太棒了,谢谢Kate。工作完美,也感谢Brains911。