我正在尝试实现一个侧边栏,但它似乎与屏幕的右侧不对齐,我不确定为什么。我已经从现有站点复制了源代码,但是看来我在我的网站上缺少了一些东西。
屏幕截图:
不正确:
正确:
小提琴
http://jsfiddle.net/Mw9Av/
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Brighter World Lighting - NY</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--imports the main css file-->
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--imports prettyPhoto css file-->
<link rel="stylesheet" type="text/css" media="screen" href="css/prettyPhoto.css" />
<!--imports jquery-->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<!--imports twitter feed plugin-->
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<!--imports easing plugin-->
<script type="text/javascript" src="js/easing.js"></script>
<!--imports prettyPhoto plugin-->
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<!--imports jQuery Tools plugin-->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<!--imports jQuery superfish plugin-->
<script type="text/javascript" src="js/superfish.js"></script>
<!--imports jQuery jflickrfeed plugin-->
<script type="text/javascript" src="js/jflickrfeed.min.js"></script>
<!--imports jQuery AsyncSlider plugin-->
<script type="text/javascript" src="js/jquery.asyncslider.min.js"></script>
<!--imports custom javascript code-->
<script type="text/javascript" src="js/custom.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
// Setup Slider
$("#async-slider").asyncSlider({
keyboardNavigate: true,
easing: 'easeInOutExpo',
minTime: 600,
maxTime: 1500,
autoswitch: 4800,
centerPrevNextNav: false,
slidesNav: false
});
});
</script>
<!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 8]><link href="css/ie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
<div id="header" class="pattern-1">
<div id="header-inner">
<div id="logo">
<img src="img/logo.png" alt="image description"/>
<div id="title">
<h1><a href="index.asp"></a></h1>
<p></p>
</div><!-- end title -->
</div><!-- end logo -->
<ul id="navigation">
<li>
<a class="active-nav" href="index.asp">Home
</a>
</li>
<li>
<a href="partnership.html">Energy Partnership Program
</a>
</li>
<li>
<a href="http://bwl.ereverseauction.com">Energy Auction
</a>
</li>
<li>
<a href="#">Affiliates
</a>
</li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-23"><a href="products.html" >Products</a>
<ul class="sub-menu">
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-31"><a href="indoor.html" >Indoor Lighting</a>
</li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="outdoor.html" >Outdoor Lighting</a>
<ul class="sub-menu">
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a href="http://brighterworldlightingllc.com/excelsior-series/" >Street Lighting</a></li>
</ul>
</li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://brighterworldlightingllc.com/outdoor-lighting/" >OEM/ODM Support</a></li>
</ul>
</li>
<li>
<a href="about.asp">About Us
</a>
</li>
<li>
<a href="contact.html">Contact Us
</a></li>
</ul><!-- end navigation -->
<div class="clear"></div><!-- end clearfix -->
</div><!-- end header-inner -->
</div><!-- end header -->
<div id="page-headline">
<div id="page-headline-inner">
<div id="page-title">
<h2>Products</h2>
<p>Indoor LED Lighting</p>
</div><!-- end page-title -->
<div class="breadcrumbs">
<span>// You Are Here:</span> <a href="index.asp">Home</a> / Products
</div><!-- end breadcrumbs -->
</div><!-- end page-headline-inner -->
<div class="separator"></div>
</div><!-- end page-headline -->
<div id="wrapper">
<div id="portfolio-content">
<ul class="gallery-thumbs"><br />
<h2>T8 Tube Lighting</h2>
<img width="236" height="187" alt="T8 Tube Lighting" class="attachment-full alignleft" style="max-width: 100%;" src="http://brighterworldlightingllc.com/wp-content/uploads/2013/10/t8-1.jpg" />
<!-- article -->
<article id="post-111" class="post-111 page type-page status-publish hentry">
<div class="entry-content">
<br />
<br />
<p>One of the most common lighting types for commercial applications, Linear T8 tubes offer significant energy savings when replacing toxic fluorescent T8s with our environmentally friendly LED Linear T8 tubes. Every one of our LED tubes are RoHs compliant, meaning they are free of hazardous materials that are harmful to humans and the environment. Fluorescent T8s can contain as much as 5mg of mercury per tube. Our lights are also DesignLights Consortium (DLC) Certified which means our product qualifies for federal, state and utility rebates where available. <a href="http://brighterworldlightingllc.com/contact-and-support/" >Contact our Team</a> today to learn more about rebate incentives as well as tax deductions that would allow you to retrofit your existing facility at virtually no cost to you!</p>
<p><strong>For more information about our Linear T8 Tube Series, download the</strong><strong> T8 Tube Lighting Brochure.</strong></p>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-18-4ft.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-18-4ft.pdf']);" >DOWNLOAD HERE</a>
<p>LISTED AND CERTIFIED:<strong><br />
</strong></p>
<p><strong> </strong><a href="http://brighterworldlightingllc.com/wp-content/uploads/2013/10/41.jpg" ><img class="alignleft size-medium wp-image-373" alt="4" src="http://brighterworldlightingllc.com/wp-content/uploads/2013/10/41-320x78.jpg" width="151" height="36" /></a></p>
<hr />
<p><strong>Two Foot <strong>(2Ft)</strong></strong> – Specifications</p>
<a class="button blue " href="BWL-T8-10-IXX-3000" >Model BWL-T8-10-IXX-3000</a>
<a class="button blue " href="bwl-t8-10-ixx-3500/" >Model BWL-T8-10-IXX-3500</a>
<a class="button blue " href="bwl-t8-10-ixx-5000/" >Model BWL-T8-10-IXX-5000</a>
<p> </p>
<hr />
<p><strong>Four Foot <strong>(4Ft)</strong> Standard Output</strong>- Specifications</p>
<a class="button blue " href="bwl-t8-18-ixx-3000/" >Model BWL-T8-18-IXX-3000</a>
<a class="button blue " href="bwl-t8-18-ixx-3500/" >Model BWL-T8-18-IXX-3500</a>
<a class="button blue " href="bwl-t8-18-ixx-5000/" >Model BWL-T8-18-IXX-5000</a>
<p> </p>
<hr />
<p><strong>Four Foot <strong>(4Ft)</strong> High Output</strong> – Specifications</p>
<a class="button blue " href="bwl-t8-22-ixx-3000/" >Model BWL-T8-22-IXX-3000</a>
<a class="button blue " href="bwl-t8-22-ixx-3500/" >Model BWL-T8-22-IXX-3500</a>
<a class="button blue " href="bwl-t8-22-ixx-5000/" >Model BWL-T8-22-IXX-5000</a>
<p> </p>
</div>
<br class="clear">
</article>
<!-- /article -->
</section>
<!-- sidebar -->
<aside id="sidebar" role="complementary">
<div id="text-17" class="widget widget_text"> <div class="textwidget"><hr>
Click on the Model # below for more information.</div></div>
</div><div id="text-18" class="widget widget_text"> <div class="textwidget"><a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-10-IXX-3000.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-10-IXX-3000.pdf']);" >BWL-T8-10-IXX-3000</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-10-IXX-3500.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-10-IXX-3500.pdf']);" >BWL-T8-10-IXX-3500</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-10-IXX-5000.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-10-IXX-5000.pdf']);" >BWL-T8-10-IXX-5000</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-18-IXX-3000.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-18-IXX-3000.pdf']);" >BWL-T8-18-IXX-3000</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-18-IXX-3500.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-18-IXX-3500.pdf']);" >BWL-T8-18-IXX-3500</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-18-IXX-5000.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-18-IXX-5000.pdf']);" >BWL-T8-18-IXX-5000</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-22-IXX-3000.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-22-IXX-3000.pdf']);" >BWL-T8-22-IXX-3000</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-22-IXX-3500.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-22-IXX-3500.pdf']);" >BWL-T8-22-IXX-3500</a>
<a class="button blue " href="http://brighterworldlighting.com/download/BWL-T8-22-IXX-5000.pdf" onclick="javascript:_gaq.push(['_trackEvent','download','http://brighterworldlighting.com/download/BWL-T8-22-IXX-5000.pdf']);" >BWL-T8-22-IXX-5000</a></div>
<br />
<br /></div>
</section>
</div>
<!-- /sidebar --><!-- END #content-wrapper -->
<footer id="footer">
<div id="footer-inner" class="row">
</div>
</footer><!-- END #footer -->
<div id="footer-bar">
<div class="right">
<div id="footer-nav">
</div>
</div>
<div class="left">
</div>
</div>
</div><!-- END #wrapper -->
<div style="display:none">
</div>
<script type='text/javascript' src='http://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201414'></script>
<script src="http://stats.wordpress.com/e-201414.js" type="text/javascript"></script>
<script type="text/javascript">
st_go({v:'ext',j:'1:2.5',blog:'58938147',post:'111',tz:'0'});
var load_cmc = function(){linktracker_init(58938147,111,2);};
if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
else load_cmc();
</script> </body>
</html>
<!-- Dynamic page generated in 0.790 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2014-04-01 06:23:56 -->
<!-- Compression = gzip -->
最佳答案
您必须在两列中指定布局。
现在您可以修改您的CSS。
在第一列中,添加浮点数和宽度80%:
#portfolio-content {
width: 960px;
overflow: hidden;
padding-bottom: 35px;
position: relative;
float: left;
width: 80%;
}
在第二列中,添加浮动右边和宽度20%,即页面的剩余空间:
#text-18 {
position: relative;
float: right;
width: 20%;
margin-top: 20px;
left: 20px;
}
更新的jsfiddle在这里。
关于html - HTML侧栏显示在底部而不是右侧,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22885129/