gpt4 book ai didi

css - 扩展Grid系统中Div的背景色

转载 作者:太空宇宙 更新时间:2023-11-04 04:07:41 25 4
gpt4 key购买 nike

注意:我使用的是骨架网格系统。

我希望将我的一个 div 的背景颜色向右扩展,超过 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: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;
}

最佳答案

实现此目的的一种方法是在 #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;
}

然后添加一个 overflow hidden 的“页面”容器,以确保您不会获得滚动条。

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

#page {
overflow: hidden;
}

在第一步中,我添加新的原因 <div>而不是设计现有的 #support是我觉得最好离开<div>仅具有网格结构样式的 s。我们不想影响他们的利润。

Here's a demo .

关于css - 扩展Grid系统中Div的背景色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21127424/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com