html - 填充会使我的整个站点关闭？-6ren

html - 填充会使我的整个站点关闭？

转载作者：太空宇宙更新时间：2023-11-04 04:03:23

25

4

我正在尝试为学校网站构建 HTML 原型(prototype)，但遇到了问题。当我应用填充时:5px；对于我的元素，如 .newscast 或 .photo_gallery，它会使整个站点关闭。它使元素在每一侧都变得更大!填充应该从内部而不是外部插入。尝试向任何嵌套元素添加一些填充，它会发生!我不太确定该怎么做，但我已经包含了我的代码，但没有应用填充。

感谢您的帮助。

HTML:

<!DOCTYPE HTML>

<html>
<head>
<link href="normalize.css" rel="stylesheet" type="text/css">
<link href="grid.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<header>
    <div class="header grid_10">
        <h1>Dummy Text</h1>
    </div>

    <div class="main-menu grid_10">
    </div>
</header>

<body>
    <div class="news_reel grid_5">
        <div id="latest_news" class="grid_10">
            <h1>Dummy Text</h1>
        </div>

        <div class="old_news grid_10" id="old1">
            <h1>Dummy Text</h1>
        </div>

        <div class="old_news grid_10" id="old2">
            <h1>Dummy Text</h1>
        </div>

        <div class="old_news grid_10" id="old3">
            <h1>Dummy Text</h1>
        </div>

        <div class="old_news grid_10" id="old4">
            <h1>Dummy Text</h1>
        </div>
    </div>

    <div class="right_bar grid_5">
        <div class="grid_10" id="newsletter">
            <h1>Dummy Text</h1>
        </div>  

        <div class="grid_10" id="photo-gallery">
            <h1>Dummy Text</h1>
        </div>

        <div class="grid_10" id="newscast">
            <h1>Dummy Text</h1>
        </div>
    </div>
</body>

<footer>
    <div class="grid_10 footer_bar">
    </div>

    <div class="grid_10 footer">
        <h1>Dummy Text</h1>
    </div>
</footer>


</html>

CSS:

.header {
    height: 180px;
    margin: 0 auto;
    background: #e5e5e5;
}

.main-menu {
    height: 50px;
    margin: 0 auto;
    background: #1800ea;
}

.news_reel {
    margin: 0 auto;
    float: left;
}

#latest_news {
    height: 400px;
    margin: 0 auto;
    background: #c61111;
}

.old_news {
    height: 200px;
    margin: 0 auto;
}

#old1 {
    background: #295f16;
}

#old2 {
    background: #2527a1;
}

#old3 {
    background: #0da19f;
}

#old4 {
    background: #d00aa5;
}

.right_bar {
    margin: 0 auto;
}

#newsletter {
    height: 400px;
    margin: 0 auto;
    background: #ed337e;
}

#photo-gallery {
    height: 400px;
    margin: 0 auto;
    background: #65005c;
}

#newscast {
    height: 400px;
    margin: 0 auto;
    background: #ebc800;
}

.footer_bar {
    height: 50px;
    margin: 0 auto;
    background: #1800ea;
}

.footer {
    height: 180px;
    background: #e5e5e5;
    margin: 0 auto;
}

最佳答案

Padding 是默认放大元素的边界。如果你想改变那个用法:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

如果您想使用 <=IE8，请相应地调整框的宽度。

或者，如果您想坚持使用 grid.css，您可以在每个当前 div 中放置一个 div 并设置内部 的边距>divs，但这不是最干净的解决方案。

关于html - 填充会使我的整个站点关闭？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21710953/

25

4

0

文章推荐： javascript - jQuery 进度条给某些 div 赋值

文章推荐： c++ - Macports cgal 不工作!我如何解决它？

文章推荐： c++ - 调试和发布库及其可执行程序

文章推荐： c - 如何将简单的 opengl 线图代码转换为使用顶点数组

.htaccess - 将旧链接(HTML 站点)重定向到新页面(PHP 站点)
最近我用 php 建立了一个网站，但他们的旧网站都是 HTML 格式的。所以现在我不知道使用 .htaccess 将所有这些旧链接重定向到新站点(可能将所有带有 HTML 的链接重定向到主域)的最佳方
wordpress - 将 WordPress 站点 'A' 完全重定向到 WordPress 站点 'B'
我创建了一个新的 WordPress 网站，它是我旧网站的更名版本。它有一个新的域和一个新的设计。除此之外，其他一切都是相同的，包括内容和链接结构。现在我想完全重定向旧链接。与旧帖子一样，标签和类别
asp.net - 使用 WatiN 测试 ASP.NET 站点。是否可以在本地以编程方式部署 ASP.net 站点？
我想使用 WatiN测试我正在开发的网站的功能。理想情况下，我会在测试开始运行之前以编程方式部署网站 (asp.net MVC3)，然后在每次测试之前刷新数据。这可能吗？最佳答案在此处阅读有关使用
.net - 为什么即使页面的 EnableSessionState ="False"ASP.NET 仍然访问状态服务器，但仅适用于 VB.NET 站点，而不适用于 C# 站点？
我们的网站使用我们自己定制的 session 状态管理，与 ASP.NET session 状态分开。但是由于少数特殊页面使用 SQL Server Reporting Services，我们还需要启
带有工作示例的 JavaScript 站点
不久前我看到一个网站，其中有 JavaScript/HTML/CSS 栏目，下面有实际代码的样子。有点像 jsFiddle，但它有用户示例和演示。有谁知道这个网站的名字吗？我到处都找不到它!谢谢! 最
Sitecore 站点/项目发布在初始化时挂起
我们的核心数据库出现问题，该数据库已由前一天的备份数据库恢复。此后，网站工作正常，但我们在发布任何更改时遇到问题。一旦点击发布按钮，“发布正在初始化..”消息就会持续很长时间。截至“发布开始/结束”
Sitecore 站点/项目发布在初始化时挂起
我们的核心数据库出现问题，该数据库已由前一天的备份数据库恢复。此后，网站工作正常，但我们在发布任何更改时遇到问题。一旦点击发布按钮，“发布正在初始化..”消息就会持续很长时间。截至“发布开始/结束”
【Maven基础入门教程】Maven site(站点)
Maven 不仅仅是一款项目构建和依赖管理工具，它还能够聚合项目信息，促进项目团队间地交流。POM 中可以包含各种项目信息，例如：项目描述、SCM 地址、许可证信息，开发者信息等。用户可以使用 Mav
java - 抓取 Cloudflare 站点
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭上个月。 Improve this ques
.net - 面向公众的高流量 Silverlight 站点
您知道哪些网站正在使用 Silverlight？此信息将帮助我们决定何时采用 Silverlight 平台。这些网站应该是面向公众的并且被认为是高流量的。 (每月至少 300,000 次点击)。我
.net - 站点 DLL 似乎在发布时间歇性锁定
我尝试通过 VS2017 中的发布上下文菜单将我的 .net 核心站点部署到 Azure，偶尔(大约三分之一的部署)，我收到以下错误。 Web deployment task failed. (Web
django - 具有共享代码库和数据库的多个 Django 站点
我为 20 个不同的国家/地区创建了一个包含 20 个站点(每个站点一个不同的域)的 Django 项目。这些站点共享所有内容:代码库、数据库、网址、模板等。他们唯一不共享的是我在每个站点设置文件中
web - 将电子商务添加到 Jekyll 站点
如何将商店页面添加到我使用 jekyll 和基础构建的网站？任何自动化平台/方法都可以做到这一点。谢谢。最佳答案您可以使用 snipcart .有一个blog post和一个 demo sit
azure - 在服务结构上托管多个公共(public)站点
我部署了一个服务结构集群，域为 foo.northcentralus.cloudapp.azure.com 它具有单一节点类型和单一公共(public) IP 地址/负载均衡器。假设我部署了以下
typo3 - 在typo3中创建没有冗余文本的 "multilanguage"站点
我不是一个大的typ3 专家，也无法访问我正在使用的typ3 实例中的typoscript 选项(这是一个非常大的站点，我没有这样做的授权)。所以我希望这个问题适合 stackoverflow(如果没
Drupal 站点 - Memcache 连接错误
我们正在对我们的 Drupal 站点进行性能调整。我们正在使用 Siege 来衡量性能(作为 drupal 访问者)。环境: Nginx + FastCGI + Memcache Siege 运行
sharepoint - 批量复制文件到 SharePoint 站点
我搜索了 SO、SU 和 SP.SE寻求解决方案，但找不到我需要的东西。我正在寻找一个解决方案，它可能是一个脚本或一些其他非编码方法/工具。我正在尝试编写一个脚本(供其他人使用)或某种其他形式的自动
django - 搜索引擎如何看待本地化的 Django 站点？
我有一个 Django 站点，它使用本地化中间件与 gettext 和 trans/blocktrans 模板标签相结合，根据用户代理字符串中的首选语言向访问者显示不同的页面(这似乎是在 Django
deployment - 是否可以部署已构建的 Drupal 站点？
我是 Drupal 新手。是否可以设置所有内容并在服务器上部署 Drupal？我的意思是像放入内容、设置模块等...，然后将它们全部放到生产服务器上？最佳答案当然。复制所有文件编辑数据库凭证(
jekyll - 有没有办法检查本地是否正在提供 jekyll 站点？
我想将以下行添加到我的 head.html仅在运行时 jekyll serve本地: 如果可能的话，我正在考虑使用一些简单的液体检查。最佳答案当你做 jekyll serve本地默认 {{

首页

博学

6Ren·AI

商城

html - 填充会使我的整个站点关闭？