相关疑难解决方法(0)
你如何让浮动元素的父母崩溃？
尽管像<div>s 这样的元素通常会增长以适应其内容,但使用该float属性可能会给 CSS新手带来惊人的问题:如果浮动元素具有非浮动父元素,则父元素将崩溃.
例如:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>此示例中的父div 不会展开以包含其浮动的子项 - 它似乎具有height: 0.
你怎么解决这个问题？
我想在这里创建一个详尽的解决方案列表.如果您了解跨浏览器兼容性问题,请指出它们.
解决方案1
浮动父母.
<div style="float: left;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>优点:语义代码.
缺点:您可能并不总是希望父级浮动.即使你这样做,你是否漂浮了父母的父母,等等？你必须浮动每个祖先元素吗？
解决方案2
给父母一个明确的高度.
<div style="height: 300px;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>优点:语义代码.
缺点:不灵活 - 如果内容更改或浏览器调整大小,布局将中断.
解决方案3
在父元素中添加"spacer"元素,如下所示:
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
<div …推荐指数
解决办法
查看次数
什么是clearfix？
最近我查看了一些网站的代码,发现每个人<div> 都有一个班级clearfix.
经过快速谷歌搜索,我了解到它有时适用于IE6,但实际上是什么是一个clearfix？
与没有clearfix的布局相比,您能提供一些带有clearfix的布局示例吗？
推荐指数
解决办法
查看次数
宽度:100%-padding？
我有一个HTML输入.
输入padding: 5px 10px;我希望它是父div的宽度的100%(这是流动的).
然而,使用width: 100%;导致输入是100% + 20px如何绕过这个？
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
并排对齐<div>元素
我知道这是一个相当简单的问题,但我无法弄清楚我的生活.我有两个链接,我已经应用了背景图像.这是它目前的样子(为阴影道歉,只是按钮的粗略草图):
但是,我希望这两个按钮并排.我无法弄清楚对齐需要做些什么.
这是HTML
<div id="dB"}>
<a href="http://notareallink.com" title="Download" id="buyButton">Download</a>
</div>
<div id="gB">
<a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>
</div>
这是CSS
#buyButton {
background: url("assets/buy.png") 0 0 no-repeat;
display:block;
height:80px;
width:232px;
text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}
#galleryButton {
background: url("images/galleryButton.png") 0 0 no-repeat;
display:block;
height:80px;
width:230px;
text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px …推荐指数
解决办法
查看次数
clearfix类在css中做了什么？
我看过div标签clearfix在孩子divs使用该float属性时使用了一个类.clearfix类如下所示:
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
我发现如果我clearfix在使用该bottom-border属性时不使用,边框将显示在孩子上方divs.有人可以解释一下clearfix类的作用吗？另外,为什么有两个display属性？这对我来说似乎很奇怪.我特别好奇这content:'.'意味着什么.
谢谢,G
推荐指数
解决办法
查看次数
使用CSS将Div拆分为2列
我一直在尝试使用CSS将div拆分为两列,但我还没有设法让它工作.我的基本结构如下:
<div id="content">
<div id="left">
<div id="object1"></div>
<div id="object2"></div>
</div>
<div id="right">
<div id="object3"></div>
<div id="object4"></div>
</div>
</div>
如果我试图将右边和左边的div移动到它们各自的位置(右边和左边),它似乎忽略了内容div的背景颜色.我从各种网站尝试的其他代码似乎无法转换为我的结构.
谢谢你的帮助!
推荐指数
解决办法
查看次数
即使有内容,Div也不会扩展
我有一堆div在彼此里面,所有的div都有一个ID,它只指定CSS.
但由于某种原因,周围的DIV标签只扩展到它的受膏高度值,而不是它的默认自动值,这意味着尽管内容在内部,但是后备DIV只是一个特定的高度.我需要它来调整高度到其内部的任何大小(因为将有用户提交的数据可能在500多个单词的段落中回显.)
这是我的HTML
#albumhold {
width: 920px;
padding: 10px;
height: auto;
border: 1px solid #E1E1E1;
margin-left: auto;
margin-right: auto;
background-color: #E1E1E1;
background-image: url(../global-images/albumback.png);
background-position: top center;
background-repeat: repeat-x;
}
#albumpic {
display: block;
height: 110px;
width: 110px;
float: left;
border: 1px solid #000;
}
#infohold {
width: 800px;
background-color: #CCC;
float: right;
height: 20px;
}
#albumhead {
width: 800px;
height: 20px;
text-indent: 10px;
border: 1px solid #000;
color: #09F;
}
#albuminfo {
margin-top: 5px;
width: 800px;
float: right;
color: #09F; …推荐指数
解决办法
查看次数
浮动元素后为什么忽略html元素的上边距？
我有一个包含2个div的页面.第一个浮动.第二个有一个"清晰:两个"CSS声明和一个大的上边距.但是,当我在Firefox或IE8中查看页面时,我没有看到上边距.看起来第二个div正在触及第一个div而不是被分开.有没有办法让最高保证金正常运作？
我已经阅读了CSS规范,并注意到它说"由于浮动不在流中,浮动框之前和之后创建的非定位块框垂直流动,就像浮动不存在一样.".但是,我不知道该怎么做.
这是一个例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS test</title>
</head>
<body>
<div style="float: left; border: solid red 1px">foo</div>
<div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
</body>
</html>推荐指数
解决办法
查看次数
使用CSS在HTML中设置div的高度
我试图布置一个有两列的表格式页面.我希望最右边的列停靠在页面右侧,此列应具有不同的背景颜色.右侧的内容几乎总是小于左侧的内容.我希望右侧的div始终足够高,以便到达它下面的行的分隔符.如何使背景颜色填充该空间？
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}<div class="separator">
<div class="rightfloat">
Some really short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
<div class="separator">
<div class="rightfloat">
Some more short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div> …推荐指数
解决办法
查看次数