个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试制作一个带有边框的流畅网页，但是当我使用 css 使其流畅时，外面的右边框就错位了
https://jsfiddle.net/9jtxjb1s/
HTML代码:
<!DOCTYPE html>
<html>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
<div id="container">
<header>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="link1.html">Link 1</a>
<ul>
<li><a href="gallery1.html">Gallery</a></li>
</ul>
</li>
<li><a href="link2.html">Link 2</a>
<ul>
<li><a href="gallery2.html">Gallery</a></li>
</ul>
</li>
<li><a href="link3.html">Link 3</a>
<ul>
<li><a href="gallery3.html">Gallery</a></li>
</ul>
</li>
<li><a href="link4.html">Link 4</a></li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</section>
<footer>
<p>© Test</p>
</footer>
</div>
</div>
</div>
</body>
</html>
样式化 CSS:
#container{
background:#228b22;
float:left;
border:1px solid #000000;
width:98%;
}
body {
font-family:Arial, Helvetica Neue, Helvetica, sans-serif;
font-size:90%;
margin:20px auto;
text-align:center;
line-height:1.4em;
width:98%;
background:white;
}
header, section, article, footer, nav{
padding:10px 20px 20px;
margin:10px;
float:left;
width:90%;
border:1px solid #000000;
}
header {
display:block;
position:relative;
text-align:left;
}
header h1 {
font-size:2.3em;
text-transform:none;
text-align:center;
}
header h2 {
margin:10px 0px 20px;
font-size:1.3em;
text-align:center;
}
nav {
float:left;
text-align:center;
display:block;
}
nav ul{
margin-left:15%;
padding:0;
list-style:none;
text-align:center;
}
nav ul li{
float:left;
width:150px;
height:30px;
line-height:30px;
text-align:center;
background:#4ea24e;
border:1px solid #000000;
}
nav ul li a{
text-decoration:none;
color:black;
}
nav ul li li{
background:#4ea24e;
color:#fff;
display:none;
float:left;
margin-left:-17.9%;
}
nav ul li li:hover{
background:#7ab97a;
}
nav ul li li a{
text-decoration:#8A5C2E;
color:#black;
}
最后，流体网格代码:
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
border:1px solid #000000;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
任何帮助将不胜感激
最佳答案
我从#container 元素中删除了 98%，现在看起来没问题了。
#container{
background:#228b22;
float:left;
border:1px solid #000000;
}
查看 fiddle .
关于html - 边界问题和流畅的布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32261849/
25
4
0
我想在单击按钮时进行移动:向左。这是针对移动运动的... 问题在于它的移动，但只有一次。我需要点击按钮发送垃圾邮件... 代码: 在创建中: this.buttonleft.inputEnabled
前言 今天大姚给大家分享一个.NET开源（MIT License）、免费、现代化、流畅、可测试、可移植的URL构建器和HTTP客户端库：Flurl。 项目介绍 Flurl是一个集现代性、流畅性、
我不确定其他与我的问题明显相似的问题是否归结为同一主题。 请考虑这段代码(为更清楚起见，为 head 部分提取了 CSS 代码): body { margin: 0;
我是一名学习 html/css 的学生，我在创建第一个网站时遇到了问题。我在配置页面时遇到了很多困难，因此它是流动的而不是固定的。我配置了一个框、图像和一些文本，因此它们在页面上是绝对的，但我无法使页
在我的游戏中，我已将角色设置为移动。它的设置方式是: if game_over_state == False: if event.type == pygame.KEYDOWN:
我一直在研究代码，但似乎无法让它工作。我用谷歌搜索，在这个网站上搜索了 13 页，但仍然找不到我要找的答案。 我希望视频以特定尺寸开始，然后随着我调整浏览器大小(从桌面到 iPad/iPhone)而缩
我已经从 sql server 2005 切换到 mysql，这并不是一个真正的问题。 我对 sql server 中存在的 (n)varchar 有一个小问题。通常我用过: mapping.Map(
我必须使用自定义 odbc 驱动程序。 我需要作为连接字符串传递的只是 DSN。 我如何使用(流畅)nhibernate 做到这一点？ FluentNHibernate.Cfg.Db 仅提供带有 DS
我无法找到我们网站上动态显示的弹出窗口。最初该元素处于以下 html 状态: 使用jquery的show和hide，div显示5秒，稍后隐藏。 在我的 Selenium 脚本中，我尝试使用以下语句等
我有一个 two/three基于屏幕尺寸的列布局。 如果窗口大小大于 1000比我需要遵循 3 column其他布局我需要遵循 two column布局。 我是用JS实现的，但是代码很乱。现在我想用
我有一个 Flutter 应用程序，随着时间的推移和添加的功能越来越多，它变得越来越笨拙。因此，是否有一些实用程序可以使其像 60FPS 一样流畅？ 我知道这里有一些官方指南:https://docs
我在如何实现 $(window).smartresize() 上纠结了几个小时使我的 div 流畅的功能。 我使用了这个 theme 中的 javascript但是当我尝试自己实现它时，我的 div
当我尝试通过 canvas.getContext('2d') 和 canvas.getContext('webgl') 将相同的 PNG 文件加载到 Canvas 中时，发现与canvas2d相比，w
我有一个所有实体的基类: public class BaseClass { public int SomeProperty {get; set;} } public class SomeEnt
我正在从事一个对时间相当敏感的元素。任务是制作一个微型网站，用户可以通过他们的智能手机访问该网站，在那里他们可以访问许多电影。他们会扫描二维码(我知道他们已经死了，我没有计划这次事件)。并登陆这个网站
我们正在使用Entity Framework 5.0。和数据库MySQL。当我们尝试迁移时间时出现异常。 could not be created because the principal key
快速问题：如何将传递给shiny.fluent：：Text函数的文本设置为粗体？更广泛地说，如何将样式选项传递给此函数？。在函数的帮助页面中，它是这样写的。但我不明白如何使用这个变量参数。。我试着在不
我是一名优秀的程序员,十分优秀！