我真的不明白为什么我的float: right;div低于容器div.我不知道如何解决这个问题.有人可以解释一下吗?我很久以前在另一个网站上遇到过这个问题,但完全忘记了如果我完成它我是如何设法修复它的.我希望它当然在容器内.
<div id="menu">
<div class="categories"></div>
<img class="logo" src="#" />
<div class="thumb"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
-
#menu
{
width: 960px;
height: 70px;
margin: auto;
background-color: blue;
}
#menu .thumb
{
background-color: aqua;
float: right;
height: 60px;
width: 400px;
}
Run Code Online (Sandbox Code Playgroud)

这似乎非常简单,但我不知道为什么我不能在容器div标签内放置div标签,因为它不会在Firefox或Chrome中正确显示,但它适用于IE6 ...... ??? 代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
CSS:style.css
body {
background:white;
font-family: sans-serif;
}
#container {
margin:0 auto;
width:960px;
background:#e3e3e3;
border:1px solid black;
}
#nav {
padding:10px;
margin-top:10px;
float:left;
width: 400px;
height:100px;
background:white;
border:1 px solid black;
}
Run Code Online (Sandbox Code Playgroud)
这就好像容器没有随着DIV标签内部扩展一样......给出了什么?
我正在使用这些代码来制作包含浮动子项(而不是折叠)的包装元素:
.wrap:after {
content: '';
display: block;
clear: both;
}
Run Code Online (Sandbox Code Playgroud)
现在我看到了使用table作为display值的代码。
据说这是为了“包含子元素的上边距”。
全文在这里:http : //nicolasgallagher.com/micro-clearfix-hack/
我已经对这两种变体(块、表)进行了修补,但我找不到任何区别。
有人可以提供一个示例来说明使用块或表之间的区别吗?
我有一个像这样的XHTML结构:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="Seite" class="bgr">
<div id="Titel" class="bgr">
<h1>some titel</h1>
</div>
<div id="Mitte" class="bgr">
<div id="Navigation" class="bgr">
<ul>
<li><a href="link.html" class="aktiv"><img src="text.gif" alt="[Link]" /></a></li>
</ul>
</div>
<div id="Inhalt" class="uebersicht bgr">
Content
</div>
</div>
<div id="Fusszeile" class="bgr">
</div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
"Titel"和"Fusszeile"都是块元素(display:block;).额外的容器div"Mitte"主要用于保证金/填充和背景图像的原因."导航"和"Inhalt"的CSS如下所示:
div#Navigation {
float: left;
}
div#Inhalt {
margin: 0 0 1em 185px;
padding: …Run Code Online (Sandbox Code Playgroud) 我有一个像这样的网页结构:
<div class="total">
<div class="menu">
</div>
<div class="content">
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
所以"menu"div包含我的左侧菜单,而"content"div包含一些动态文本.实际上,我所做的结构都以正确的方式定位,在我的"总"div中.我实际上在我的CSS上编辑了我的"总"div,如下所示:
.total{
position:relative;
top:50px;
margin: 0 auto;
background-color:#eeeeee;
height:auto;
border:2px solid #000;
border-color:rgb(82,115,154);
}
Run Code Online (Sandbox Code Playgroud)
问题是我无法获得我真正想要的东西:边框全部位于顶部(它就像一条水平行),并且我的div不会出现不同的背景颜色.
如何让"总"div的高度变得动态?
编辑:链接到jsFiddle
我正在研究一个项目,但我找不到一种方法来选择仪表板的最后一个孩子
<div class="dashboard">
<div class="grid_6 alpha">
<div class="grid_6 omega">
<div class="grid_6 alpha">
<div class="grid_6 omega">
<div class="grid_6 alpha">
<div class="grid_6 omega"> //i wanna select this
<div class="clear"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
我试过了
.dashboard:last-child
.omega:last-child
Run Code Online (Sandbox Code Playgroud) 我得到以下代码:https: //jsfiddle.net/2uhttdgk/3/
html {
height: 100%;
}
html, body {
min-height: 100% !important;
/* prevent horizontal scrolling */
max-width: 100% !important;
overflow-x: hidden !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#menuButton {
float:left;
background-image: url("../images/hamburger_menu.png");
width: 50px;
height: 40px;
margin-right: 5px;
}
#powerButtonBox {
float: right;
}
#outerBox {
min-height: 100%;
height: auto !important;
height: 100%;
}
#title {
background: #E95353;
padding: 10px;
color: white;
font-size: x-large;
}
#outerBox {
width: 100%;
height: 100%;
}
.nav a …Run Code Online (Sandbox Code Playgroud)任何人都可以告诉我为什么在IE7中这个网站的页脚上没有拾取背景颜色"黑色"?