HTML边栏显示在底部而不是右侧
我试图实现侧边栏，但它似乎与屏幕的右侧不对齐，我不确定为什么。我已经复制了现有网站的来源，但看起来我遗漏了一些东西。
截图：
不正确：
正确：
小提琴
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 -->
1 个答案:
答案 0 :(得分：0)
您必须在两列中指定布局。
现在您的范围可以修改您的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。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？