Question

以下是页脚部分的代码：

<footer>
         <div class="footer">
            <nav>
               <ul class="nav-list1">
                  <li><img src="img/notes.png" alt="img"></li>
                  <li>ARTICLES</li>
                  <li>BLOG</li>
                  <li>COLUMN</li>
                  <li>TOPICS</li>
               </ul>
               <ul class="nav-list2">
                  <li>ABOUT</li>
                  <li>AUTHOURS</li>
                  <li>MASTHEAD</li>
                  <li>CONTRIBUTE</li>
                  <li>STYLEGUIDE</li>
                  <li>CONTACT</li>
                  <li>SPONSORSHIPS</li>
               </ul>
            </nav>
            <hr class="hr-style" />
           <section class="clearfix footerWidth">
               <div class="footer-column1">
                  <img src="img/footer1.png" class="footer-image" alt="dot"/> 
                  <p class="footer-title">.NET Training</p>
                  <p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
                  <p><a class="footer-link" href="#">ask here. ></a></p> 
               </div>
               <div class="footer-column2">
                  <img src="img/footer2.png" class="footer-image" alt="expert"/> 
                  <p class="footer-title">Shopify Expert at $20 / hour</p>
                  <p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
                  <p><a class="footer-link" href="#">click to view</a></p>
               </div>
            </section>
            <hr class="hr-style" />
            <p class="copyright">Copyright &copy; 2013 Dot Net How</p>
         </div>
      </footer>

这是我的JSfiddle：

http://jsfiddle.net/d0teo50p/7/

在页脚部分的页面中，内容的右侧未正确显示。

任何人都可以帮我解决这个问题。

Answer 1

将width:960px;设为div.footer，将style="float:left;"设为div.footer-column2 > p.footer-title，然后将width:110%;移至p.footer-pgf。

尝试 - DEMO

<强> HTML

<div class="wrapper">
         <header id="header">
            <img src="http://s30.postimg.org/rlkl06s9d/logo.jpg" alt="logo" id="logo">
            <h1>The Articles</h1>
                 <nav class="header-nav">
                  <ul>
                      <li><a href="#">Articles</a></li>
                     <li><a href="#"><img src="img/icon.png" alt=""> &nbsp; Home</a></li>
                  </ul>
               </nav>
         </header>
         <section id="section">
            <article class="article">

                  <img src="http://s30.postimg.org/60fickvip/articles.jpg" alt="articles" />
                  <p class="comments">
                     by<span class="woo"> JOHN WOO</span> 
                     <date>June 04, 2013, 22 Comments</date>
                  </p>
                  <h1 class="issue">Issue No 376</h1>
                  <p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
                  <p class="dev-express">asp.net, .net, dev-express</p>
                  <a href="#" class="myButton">More</a>

               <div class="border-bottom"></div>
               <div class="article1">
                  <img src="http://s30.postimg.org/anq5s389d/cat.png" alt="" />
                  <p class="comments">
                     by <span class="woo">JOHN WOO</span> 
                     <date>June 04, 2013, 22 Comments</date>
                  </p>
                  <h1 class="issue">Issue No 375</h1>
                  <p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
                  <p class="dev-express">asp.net, .net, dev-express</p>
                  <a href="#" class="myButton">More</a>
               </div>

            </article>

            <aside class="aside">

               <img src="http://s30.postimg.org/hlpokah01/agencies.jpg" alt="agencies" />
               <h3>From the Blog</h3>
               <p class="windows">DAVID  <i> on </i>c# Windows</p>
               <p class="hex">How to convert System.Color to HTML color (hex)?</p>
               <p class="sidebar-pgf">I'm working on an application that requires converting the back color of the panel to HTML that can be used as a div background color. Please help.</p>
               <a  href="#" class="view">view answer</a>
            </aside>
          </section>
      </div>
         <footer>
         <div class="footer">
            <nav>
               <ul class="nav-list1">
                  <li><img src=".http://s30.postimg.org/rhqrjxmrx/notes.png" alt="img"></li>
                  <li>ARTICLES</li>
                  <li>BLOG</li>
                  <li>COLUMN</li>
                  <li>TOPICS</li>
               </ul>
               <ul class="nav-list2">
                  <li>ABOUT</li>
                  <li>AUTHOURS</li>
                  <li>MASTHEAD</li>
                  <li>CONTRIBUTE</li>
                  <li>STYLEGUIDE</li>
                  <li>CONTACT</li>
                  <li>SPONSORSHIPS</li>
               </ul>
            </nav>
            <hr class="hr-style" />
           <section class="clearfix footerWidth">
               <div class="footer-column1">
                  <img src="http://s30.postimg.org/ckiaix9jl/footer1.png" class="footer-image" alt="dot"/> 
                  <p class="footer-title">.NET Training</p>
                  <p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
                  <p><a class="footer-link" href="#">ask here.</a></p> 
               </div>
               <div class="footer-column2">
                  <img src="http://s30.postimg.org/fm92svmoh/footer2.png" class="footer-image" alt="expert"/> 
                  <p class="footer-title" style="float:left;">Shopify Expert at $20 / hour</p>
                  <p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
                  <p><a class="footer-link" href="#">click to view</a></p>
               </div>
            </section>
            <hr class="hr-style" />
            <p class="copyright">Copyright &copy; 2013 Dot Net How</p>
         </div>
      </footer>

<强> CSS

* {
    box-sizing:border-box;
}

body {
    font-family:Raleway, sans-serif;
    text-decoration:none;
    line-height:1.42857143;
    margin:0;
}

html {
    position:relative;
    min-height:100%;
}

.wrapper {
    width:960px;
    margin-left:auto;
    margin-right:auto;
}

#header {
    margin:10px;
}

#header nav {
    float:right;
    margin-top:15px;
}

#header nav li {
    display:inline-block;
}

#logo {
    padding-bottom:40px;
    border-bottom:solid 2px #CCC;
}

.view {
    color:#FF8C00;
}

.hr-style {
    background:url(http://s27.postimg.org/4sfiqgx7j/horizontal_lin

e.png) 50% 0 repeat-x;
    border:0;
    height:15px;
}

a {
    text-decoration:none;
    font-size:12px;
}

i {
    font-weight:100;
}

img {
    vertical-align:middle;
    border:0;
}

.header-nav ul li {
    display:inline;
    float:right;
    font-size:12px;
    padding:10px;
}

.header-nav ul li a {
    color:gray;
}

.comments,date {
    color:gray;
    font-size:12px;
    font-style:italic;
}

.woo {
    color:#FF8C00;
    font-style:normal;
    font-size:15px;
}

.lorem {
    color:gray;
    font-size:13px;
    line-height:25px;
    letter-spacing:.07pt;
    width:86%;
}

.border-bottom {
    border-bottom:1px solid gray;
    width:90%;
    padding-top:15px;
}

.dev-express {
    font-size:12px;
    font-family:Arial Narrow;
    color:gray;
    letter-spacing:1pt;
}

.article1 {
    margin-top:15px;
}

.myButton {
    background-color:#FF8C00;
    border-radius:4px;
    display:inline-block;
    cursor:pointer;
    color:#fff;
    font-size:13px;
    text-decoration:none;
    padding:6px 18px;
}

.myButton:hover {
    background-color:#FF8C00;
}

.myButton:active {
    position:relative;
    top:1px;
}

#section {
    display:table;
}

.article {
    width:75%;
    padding-bottom:50px;
    display:table-cell;
    vertical-align:top;
}

.aside {
    display:table-cell;
    vertical-align:top;
    width:25%;
}

.issue {
    color:#FF8C00;
    font-size:25px;
    font-weight:400;
}

.windows {
    font-weight:600;
    font-size:12px;
}

.hex {
    font-weight:600;
    color:#FF8C00;
}

.sidebar-pgf {
    font-size:13px;
    line-height:23px;
    letter-spacing:.07pt;
}

nav {
    text-align:center;
}

.nav-list1 li {
    display:inline;
    font-size:12px;
    font-weight:700;
    letter-spacing:.2pt;
    padding:15px;
}

.nav-list2 li {
    display:inline;
    font-size:11px;
    font-weight:800;
    letter-spacing:.2pt;
    padding:15px;
}

.footer {
    background-image:url(http://s27.postimg.org/80k03ijhb/footer_bg.jpg);
    bottom:0;
    clear:both;
    height:auto;
    padding:15px;
    width:960px;
}

.footer-image {
    float:left;
    padding-right:13px;
}

.footer-title {
font-weight:700;
font-size:12px;
}

.footer-pgf {
    font-size:11px;
}

.footer-link {
font-size:11px;
    font-weight:600;
}

.copyright {
    font-size:12px;
    font-weight:500;
    text-align:center;
}

.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}

.column4-pgf {
    font-size:11px;
}

.well {
    background-color:#f5f5f5;
    border:#e3e3e3 solid 1px;
    border-radius:4px;
    box-shadow:0 1px 1px rgba(0,0,0,0.05) inset;
    margin-bottom:20px;
    min-height:20px;
    padding:19px;
}

.footer-column2 {
    margin-left:45px!important;
}

section.footerWidth {
    width:960px;
    margin:0 auto;
}

#header h1,.footer-column1,.footer-column2 {
    float:left;
}

@media min-width992px{
.column-1,.column-2,.column-3,.column-4,.footer-column1,.footer-column2 {
    min-height:1px;
    padding-left:15px;
    padding-right:15px;
    position:relative;
}
}

@media min-width 992px{
.footer-column1,.footer-column2 {
    width:45%;
    margin-left:15px;
}
}

图片：

html5中的css页脚问题

1 个答案: