在網格系統中擴展Div的背景顏色

Question

注意：我正在使用骨架網格系統。

我希望將我的一個div的背景顏色向右延伸，經過960px容器，但我沒有成功。 有什么建議么？

當前： 在此輸入圖像描述

我在找什么：

在此輸入圖像描述

HTML：

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

    <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8">
    <title>Your Page Title Here :)</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS
  ================================================== -->
    <link rel="stylesheet" href="stylesheets/base.css">
    <link rel="stylesheet" href="stylesheets/skeleton.css">
    <link rel="stylesheet" href="stylesheets/layout.css">
    <link rel="stylesheet" href="stylesheets/responsive-nav.css">


    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Favicons
    ================================================== -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

<script src="js/responsive-nav.js"></script>
</head>
<body>


    <!-- Primary Page Layout
    ================================================== -->

    <!-- Delete everything in this .container and get started on your own site! -->

    <div class="container">
        <div class="sixteen columns">
            <h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
            <h5>Version 1.2</h5>
            <hr />
        </div>
        <div class="one-third column">
            <h3>About Skeleton?</h3>
            <p>Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
        </div>
        <div class="one-third column">
            <h3>Three Core Principles</h3>
            <p>Skeleton is built on three core principles:</p>
            <ul class="square">
                <li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
                <li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
                <li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
            </ul>
        </div>
        <div class="one-third column" id="support">
            <h3>Docs &amp; Support</h3>
            <p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.</p>
        </div>

    </div><!-- container -->


<!-- End Document
================================================== -->
</body>
</html>

CSS：

/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
    #Site Styles
    #Page Styles
    #Media Queries
    #Font-Face */

/* #Site Styles
================================================== */

#support{
    color: #fff;
  background-color: #000;
  position: relative;
  background-size: 100px;
}

Answer 1

實現這一目標的一種方法是在#support添加一個新的HTML元素，並為其提供100％正確填充和100％負右邊距。 像這樣：

<div class="one-third column" id="support">
  <div class="inner">
  ...
  </div>
</div>

#support .inner {
  padding-right: 100%;
  margin-right: -100%;
  background-color: #000;
}

然后添加一個隱藏溢出的“頁面”容器，以確保沒有滾動條。

<div id="page">
  <div class="container">
  ...
  </div>
</div>

#page {
  overflow: hidden;
}

在第一步中，我添加新的<div>而不是為現有的#support樣式的原因是我認為最好留下僅具有網格結構樣式的<div> 。 我們不想影響他們的利潤。

這是一個演示 。

在網格系統中擴展Div的背景顏色

問題描述

1 個解決方案

解決方案1
2 已采納 2014-01-15 02:54:13

在網格系統中擴展Div的背景顏色

問題描述

1 個解決方案

解決方案1 2 已采納 2014-01-15 02:54:13

解決方案1
2 已采納 2014-01-15 02:54:13