相关疑难解决方法(0)
我可以使用哪种'clearfix'方法？
我有一个div包装两列布局的古老问题.我的侧边栏是浮动的,所以我的容器div无法包装内容和侧边栏.
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明确错误:
<br clear="all"/>overflow:autooverflow:hidden
在我的情况下,唯一似乎正常工作的是<br clear="all"/>解决方案,这有点邋.. overflow:auto给我讨厌的滚动条,overflow:hidden肯定有副作用.此外,IE7显然不应该由于其不正确的行为而遭受这个问题,但在我的情况下,它与Firefox的痛苦相同.
目前我们可以采用哪种方法最强大？
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
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
推荐指数
解决办法
查看次数
浮动元素后为什么忽略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>推荐指数
解决办法
查看次数
增加包含浮动嵌套div的父div的高度
div基于漂浮的孩子,我似乎无法自动增长父母的身高div.所有的孩子都漂浮着,水平占据空间,然后包裹到下一行.浮动子项的数量可能会发生变化,父项必须自动调整其高度.(父亲div作为所有浮动div的背景).div在父母下方还有第二个div需要被推下来,因此它低于浮动divs.
解决方案在IE中运行非常重要.
推荐指数
解决办法
查看次数
如何删除列表项之间的空格
如何摆脱列表项之间的空白区域？我试图让图像紧挨着彼此.即使我已经设置了样式margins: 0;,它们仍然是分开的.
CSS
ul.frames{
margin: 20px;
width: 410px;
height: 320px;
background-color: grey;
float: left;
list-style-type: none;
}
ul.frames li {
display:inline;
margin: 0;
display: inline;
list-style: none;
}
ul.frames li img {
margin: 0 0 0 0;
}
HTML
<li>
<img id="myImg" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
<img id="myImg2" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
<img id="myImg3" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
<img id="myImg4" src="img.jpg" width="102.5px" height="80px"/>
</li>
推荐指数
解决办法
查看次数
如何使用html和css创建一个小的彩盒？
我在html文件/网站上有一张图片,我想添加该图片的可用颜色列表.我想创建非常小的盒子或点,每个颜色的小盒子.
我怎样才能做到这一点？
谢谢!
推荐指数
解决办法
查看次数
左右对齐在同一条线上
我想创建一个div包含两段文本的标题.一段文字将左对齐,一对右.标题将具有灰色背景,将随文本一起展开:
<div id="expand-box">
<div id="expand-box-header">
<span style="float: left;">Top left header</span>
<span style="float: right;">Top right header</span>
</div>
Lorem ipsum dorem nori seota ostiy
</div>
CSS:
#expand-box
{
width: 100%;
padding: 0;
border: 2px solid #BBB;
margin: 7px 0 0 0;
}
#expand-box-header
{
background-color: #BBB;
margin: 0;
color: #FFF;
padding: 0 0 3px 2px;
}
虽然这有效,但两个spans浮动在expand-box-header灰色背景上,而Lorem Ipsum文本浮动的高度应该是它应该的.
推荐指数
解决办法
查看次数
如何使用.clearfix类？
我想我误解了.clearfix班级的概念.也许有人可以帮助我.
我正在寻找一种使用方式,float而clear不会弄乱我的标记.所以我想,这就是.clearfix可以用的地方.
在一个空的H5BP项目中,我的标记看起来像:
<div></div>
<div></div>
<div class="clearfix"></div>
<div></div>
<div></div>
<div class="clearfix"></div>
<div></div>
<div></div>
<div class="clearfix"></div>
结果如下.不过,我期待一个tic tac toe-field.有人能告诉我:
- 我如何才能实现自己的目标
- 这
.clearfix堂课真的可以用来做什么？
推荐指数
解决办法
查看次数
当里面有img时,Div没有高度
我有一个div [div1]围绕其他元素.在元素内部,我有一个绝对定位的图像.Div1和元素在它们上面留有浮动并且没有显示高度.有没有办法让这个主要整体div1有一个高度,所以其他元素,如页脚可以浮在它下面.
HTML
<div class="div1">
<div> <img src="image1.jpg" /> </div>
<div> <img src="image2.jpg" /> </div>
<div> <img src="image3.jpg" /> </div>
</div>
CSS
.div1{
width:100%;
height:auto;
overflow:auto;
float:left;
}
.div1 div{
width:100%;
height:auto;
overflow:auto;
float:left;
}
.div1 div img{
width:100%;
height:auto;
position:absolute;
display:block;
float:left;
}
推荐指数
解决办法
查看次数