HTML 边栏出现在底部而不是右侧-6ren

HTML 边栏出现在底部而不是右侧

转载作者：行者123 更新时间：2023-11-28 10:48:08

我正在尝试实现侧边栏，但它似乎没有与屏幕右侧对齐，我不确定为什么。我已经从现有站点复制了源代码，但是我似乎遗漏了一些东西。

截图:

不正确:

enter image description here

正确:

enter image description here

fiddle

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> &#8211; 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>&nbsp;</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>&nbsp;</p>
<hr />
<p><strong>Four Foot <strong>(4Ft)</strong> High Output</strong> &#8211; 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>&nbsp;</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。

你的第一列，添加 float 和 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 边栏出现在底部而不是右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22885129/

文章推荐： ios - 使用静态单元格在 UITableViewController 上添加按钮覆盖

文章推荐： css - Wordpress 子主题导致填充更改而无需修改

文章推荐： swift - Unrecognized Selector 在 Xcode/Swift 4 中是如何实现的？

文章推荐： swift - tableView下添加TapGesture查看

iphone - 出现 Storyboard之前的选项卡栏项目标题
我的应用程序从一个有 5 个选项卡的选项卡栏 Controller 开始。一开始，第一个出现了它的名字，但其他四个没有名字，直到我点击它们。然后根据用户使用的语言显示名称。如何在选项卡栏出现之前设置选
javascript - 为什么我的数据表没有在函数内部使用 $.each 出现？
我有嵌套数组 json 对象(第 1 层、第 2 层和第 3 层)。我的问题是数据表没有出现。任何相关的 CDN 均已导入。该表仅显示部分。我引用了很多网站，但都没有解决我的问题。之前我使用标准表来
swift - PFLoginViewController 出现
我正在尝试设置要显示的 Parse PFLoginViewController。这是我的一个 View Controller 的类。 import UIKit import Parse import
java - 图形未绘制/出现
我遇到了这个问题，我绘制的对象没有出现在 GUI 中。我知道它正在被处理，因为数据被推送到日志文件。但是，图形没有出现。这是我的一些代码: public static void main(Strin
java - 出现 - TreeMap
我有一个树状图，其中包含出现这样的词...... TreeMap occurrence = new TreeMap (); 字符串 = 单词整数 = 出现次数。我如何获得最大出现次数 - 整数，
java - 出现 do-while 错误
因此，我提示用户输入变量。如果变量小于 0 且大于 10。如果用户输入 10，我想要求用户再次输入数字。我问时间的时候输入4，它说你输入错误。但在第二次尝试时效果很好。例如:如果我输入 25，它会打印
出现 CSS 溢出滚动条但不工作
我已经用 css overflow 属性做了一个例子。在这个例子中我遇到了一个溢出滚动的问题。滚动条出现了，但没有工作意味着每当将光标移动到滚动条时，在这个滚动条不活动的时间。我对此一无所知，所以请帮
Javascript 出现/消失对象
我现在正在做一个元素。当您单击一个元素时，会出现以下信息，我想知道如何在您单击下一个元素而不重新单击同一元素时使其消失....例如，我的元素中有披萨，我想单击肉披萨看到浇头然后点击奶酪披萨看到浇头和肉
python简单路由器url匹配器，如何重新匹配第一个 "/"出现
我有一个路由器模块，它将主题与正则表达式进行比较，并将出现的事件与一致的键掩码链接起来。 (它是一个简单的 url 路由过滤，如 symfony http://symfony.com/doc/curr
出现 PHP 错误但代码仍然正确执行
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: mysql_fetch_array() expects parameter 1 to be resource, bo
ios - 出现 View 时工具栏跳到位
我在底部有一个带有工具栏的 View ，我正在使用 NavigationLink 导航到该 View 。但是当 View 出现时，工具栏显示得有点太低了。大约半秒钟后，它突然跳到位。它只会在应用程序启
SwiftUI 出现 AVAudioPlayer 播放多次
我试图在我的应用程序上为背景音乐添加一个 AVAudioPlayer，我正在主屏幕上启动播放器，尝试在应用程序打开时开始播放但出现意外行为... 它播放并立即不断创建新玩家并播放这些玩家，因此同时播放
Haskell，不知道为什么输入 ‘if’ * 出现*解析错误
这是获取一个数字，获取其阶乘并将其加倍，但是由于基本情况，如果您输入 0，它会给出 2 作为答案，因此为了绕过它，我使用了 if 语句，但收到错误输入“if”时解析错误。如果你们能提供帮助，我真的很感
java - 出现 DeadObjectException 并且应用程序崩溃
暂停期间抛出异常 android.os.DeadObjectException 在 android.os.BinderProxy.transactNative( native 方法) 在 androi
java - 出现 NoSuchElementException 并且我找不到解决方法
我已经为猜词游戏编写了一些代码。它从用户输入中读取字符并在单词中搜索该字符；根据字符是否在单词中，程序返回并控制一些变量。代码如下: import java.util.Random; import
出现 java.lang.NullPointerException
我是自动化领域的新手。这是我的简单 TestNG 登录代码，当我以 TestNG 身份运行该代码时，它会出现 java.lang.NullPointerException，双击它会突出显示我导航到 U
java - 当我尝试从另一个类向引用的类添加一些值时，出现 nullPointerException
我是c#程序员，我习惯了c#的封装语法和其他东西。但是现在，由于某些原因，我应该用java写一些东西，我现在正在练习java一天!我要创建一个为我自己创建一个虚拟项目，以便让自己更熟悉 Java 的
java - ClassPathXmlApplicationContext 出现 NoClassDefFoundError？
我正在使用 Intellij，我的源类是 main.com.coding，我的资源文件是 main.com.testing。我将 spring.xml 文件放入资源文件中。我的测试类位于 test.
python - pytest 出现 ModuleNotFoundError
我想要我的tests folder separate到我的应用程序代码。我的项目结构是这样的 myproject/ myproject/ myproject.py moduleon
java - 当我尝试比较数据库中的值和编辑文本输入时，出现 NullPointerException
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 6 年前。因此，我尝试比较 2 个值，一个

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

HTML 边栏出现在底部而不是右侧

截图:

fiddle

HTML: