个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试使用 html 和 css 制作一个简单的信息网站，并使用 960 网格，因为该网站将具有分栏结构。
当我将标题 h1 float 到左侧(它有 Logo 图像，我正在使用 css 添加图像作为背景)和右侧的导航列表时，它下面的所有内容都会向上 float 并在使用溢出后:隐藏，它没有清除 float 。我已经尝试了 960 网格的 clear fix 类和 clear:both。但它们也不起作用。
所以请告诉我我做错了什么。
这是CSS
/**** =header ****/
header {
overflow: hidden;
}
header h1 {
background: url(../img/logo.png) no-repeat;
text-indent: -9999px;
height: 23px;
width: 174px;
float: left;
}
/**** =nav ****/
nav {
float: right;
}
nav li {
display: inline;
}
/**** =banner ****/
.banner {
background: url(../img/city-bg.jpg) no-repeat;
width:695px;
height:231px;
}
.callout {
background: black;
height: 231px;
}
这是html
<html>
<head>
<meta charset="utf-8" />
<titel></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/960_12_col.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body >
<div class="container_12"> <!--start container - using the 960 grid-->
<header>
<h1>White + Black</h1>
<nav>
<ul>
<li><a href="home.html">home</a></li>
<li><a href="ourservices.html">Our Serices</a></li>
<li><a href="howwework.html">How We Work</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="workexamples.html">Work Examples</a></li>
</ul>
</nav>
<div class="banner gird_10">
<p>
some text some text some text some text some text
</p>
</div>
<div class="grid_2 callout"></div>
</header>
<div class="main">
<div class="grid_5">
<h3>serices we offer</h3>
<p>
some text some text some text some text some text some text some text some text some text
</p>
<p>
some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
</p>
<p><a href="#" class="button">Read More</a></p>
</div>
<div class="grid_5">
<h3>how we work</h3>
<p>
some text some text some text some text some text some text some text some text some text
</p>
<p>
some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
</p>
<p><a href="#" class="button">Read More</a></p>
</div>
</div>
<div class="grid_2">
<blockquote>
<p>
some text some text some text some textsome text some text some text some text
</p>
</blockquote>
</div>
<footer>
<p><strong>black + white</strong> themes via <a href="www.themeforest.net">themeforest</a></p>
</footer>
</div> <!--end container-->
</body>
最佳答案
我通常做的是创建一个.clear类:
.clear {
clear:both;
}
并将其放在 float 元素之后。在这种情况下，在 nav 之后我想是这样的:
<h1>Title</h1>
<nav>
<!-- nav elements -->
</nav>
<div class="clear"></div>
但如果您有 .clearfix 类，请使用它。
关于html - 溢出 :hidden, clear:both 和 clear fix 在使用 float 后都不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33285751/
26
4
0
我想知道是否有任何方法可以调用和使用 overflow:hidden 隐藏得很好的东西。 为了阐明我的意思，在 this example我想知道“This is hidden”是div的隐藏部分。 这
如果我们有以下HTML StackOverflow 使用以下 CSS * { margin: 0; padding: 0; } #i { overflow:
我正在使用 jQuery 制作幻灯片，我有几张图片应该一次滑入一张图片。我正在使用宽度与图像宽度相同的 div:80 像素。我使用了 white-space:no-wrap 和 overflow:hi
如果我有一个样式为 overflow: hidden; 的 div，我发现有时键盘操作会导致 div 滚动。而且由于没有滚动条，所以真的没有办法让 div 回到原来的状态。除了指定样式以防止出现这种情
我有一个 UIImageView，在表格单元格中有一个自定义类，它也使用一个自定义类。 UIImageView 作为单元格自定义类的属性连接。 UIImageView 有一个调用方法的 UITapGe
我正在创建一个网站，在一个 div 中我有一个视频，但我不想在移动设备上显示这个视频，所以我使用 hidden-xs 和 hidden-sm，到目前为止一切顺利。 但是，我的问题是，当我使用这些类时，
我对 C++ 可见性属性有疑问。我已阅读 http://gcc.gnu.org/wiki/Visibility但我不太明白它是如何工作的。 我想在我拥有的一些共享库中隐藏可见性。我相信这意味着符号被隐
我通过CSS的草图创建了一个菱形，它位于一个圆圈的左上角。 我为圆圈设置了overflow: hidden。钻石怎么还能触发cursor: pointer？ 这是 project 的代码笔. html
这个问题在这里已经有了答案: Shape with a slanted side (responsive) (3 个答案) 关闭 3 年前。
在使用 Angular Material 时，我一直在看到 aria 属性。有人可以向我解释一下 aria 前缀是什么意思吗？但最重要的是我想了解的是 aria-hidden 和 hidden 属性之
我正在阅读有关 aria 使用的一些内容，并遇到了以下文档: Fourth Rule of ARIA Use 。我不清楚的一个部分是: "Applying aria-hidden to a paren
以下是我的简单导航代码。单击右上角的图标时会出现两个 div。我还在顶部使用 :before 实现了这些分区的三 Angular 形提示。对于第一个 div，我设置了 overflow:scroll
input[type=hidden] 和 visibility : hidden; 有什么区别？ 最佳答案 第一个是输入元素，第二个是CSS2中的样式。 visibility: hidden; vis
我遇到了一个奇怪的问题，似乎与浏览器相关(IE9 及更低版本与 IE11)，但想知道为什么会出现奇怪的行为。 问题描述:我使用 Spring 框架并使用其相关标签库来检索 JSP 上的数据。有一个称为
我在 viewDidLoad 中的两个 UIView 上将 hidden 属性设置为 YES。单击按钮时，它们将设置为 NO，因此将显示它们。如何在每次单击按钮时使这些属性在是/否之间切换？ 最佳答案
我正在尝试使用树状列表实现侧边栏。我希望树中的每个元素只填充一行——没有溢出，没有换行/换行。 overflow: hidden; 可能是一个很好的解决方案，但还有另一个要求 - 每行都有一个绝对 d
我想用 overflow: hidden 隐藏一个超出容器的标题: HTML: Heading CSS: div { overflow: hidden; } h1 { transfor
我对 overflow:hidden 和 body 标签有疑问。这是一个小例子 主体版本(不工作) http://jsfiddle.net/5hGSp/13/ DIV 版本(有效)
html 的“隐藏”属性是一个 bool 值，不需要设置值。仅仅存在就足够了。 “aria-hidden”属性怎么样？光有存在感就够了吗？或者它是否需要设置值“true”？ 最佳答案 aria-hid
在我的页面上，我有一个导航菜单和两个内容容器。 内容容器使用overflow:hidden 以便一次只有一个子div 显示。 我希望导航链接充当相关内容的激活器，以便在容器中滚动查看。 因此，例如，如
我是一名优秀的程序员,十分优秀！