假设你有一个div,说你把它涂成绿色并给它一个明确的宽度,当我把东西放进去时,在我的情况下是一个img和另一个div.这个想法是容器div的内容将导致容器div伸展出来,并成为内容的背景.但是当我这样做时,包含的div缩小以适应非浮动对象,并且浮动对象将要么一直出来,要么是一半,一半,并且与大div的大小没有任何关系.
为什么是这样？有没有我缺少的东西,我怎样才能获得浮动的物品来拉伸包含div的高度？
这是我的HTML:
<div class="header_wrapper">
<div class="main_nav">
<div>TEst</div>
<div>TEst</div>
<div>TEst</div>
</div>
<div class="clear"></div>
</div>
如您所见,我想构建一个带有浮动div的菜单.这样做main_nav的背景消失了.
.header_wrapper{
height:129px;
background:url('images/layout/header.png') no-repeat #1f1f1f;
border-bottom:1px solid #1f66ad
}
.header_wrapper .main_nav{
position:relative;
top:77px; left:336px;
width:750px;
background:red;
}
.header_wrapper .main_nav div{
float:left;
}
.clear{
clear:both;
}
我试图使用clear:两者,但背景仍然消失.有什么想法吗？
我div在另一个里面有3 个街区div.
我想要做的是将它们内联,但前两个div块应根据其内容采用宽度,最后一个div采用剩余空间.
<div class="container">
<div class="red">Red</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
</div>
我尽量避免使用固定宽度,因为我需要在响应式设计中使用它.
我怎样才能让蓝色div在这个小提琴采取其父其余可用空间,如果调整屏幕大小行动响应？
这段代码有什么问题？
当我添加的div后面的背景消失float: left,以#text和#text2.但是当我删除它时float: left,一切看起来都很好.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#first{
width: 200px;
background-color: #345752;
}
#left_b{
background:transparent url('img/left.png');
background-position: left top;
background-repeat: repeat-y;
min-height: 30px;
}
#right_b{
background:transparent url('img/right.png');
background-position: right top;
background-repeat: repeat-y;
}
#text{
float: left;
width: 50px;
height: 30px;
}
#text2{
float: left;
width: 70px;
height: 30px;
}
</style>
</head>
<body>
<div id = "first">
<div id = "left_b">
<div id = …我有一个像这样的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>
"Titel"和"Fusszeile"都是块元素(display:block;).额外的容器div"Mitte"主要用于保证金/填充和背景图像的原因."导航"和"Inhalt"的CSS如下所示:
div#Navigation {
float: left;
}
div#Inhalt {
margin: 0 0 1em 185px;
padding: …