Расширение цвета фона Div в сетке

Примечание: Я использую систему сетки скелета.Расширение цвета фона Div в сетке

Я ищу, чтобы расширить цвет фона одного из моих divs справа, мимо контейнера 960px, но я не добился успеха. Какие-либо предложения?

ток: enter image description here

Что я ищу:

enter image description here

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:[email protected]">[email protected]</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; 
}

источник

2014-01-15 cphill

Одним из способов достижения этого может быть добавить новый HTML-элемент внутри #support и дать ему 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> S, которые имеют стили структуры сетки в одиночку. Мы не хотим влиять на их рентабельность.

Here's a demo.

источник

2014-01-15 02:54:13 davidpauljunior

Эй, Дэвид, это работает! Большое спасибо! – cphill

Расширение цвета фона Div в сетке

ответ

Смежные вопросы