标签: css-float
清除CSS中浮动的最佳元素？
我想知道清除浮动块级元素的最佳元素是什么？
现在,我主要使用一个明确的div或ap元素:both; 应用.
您更喜欢哪些元素,或者这样做的"最佳实践"是什么？
推荐指数
解决办法
查看次数
浮动和高度
我有一个名为footerWrap的div,它包含3个无序列表.我向左浮动,所有无序列表.
我的目的是根据无序列表的高度使footerWrap高度增长.但是...在所有浏览器中(例如IE6),无序列表会传递div ...就像他们有z-index属性一样!
我试图在最后放置一个div,清楚:all,我也尝试在div上创建float:none#footerWrap
这是我的Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这是我的完整CSS代码:
div#footerWrap
{
height:180px;
background-color:#5c5c5c;
background-image:url('../../img/bgFooter.png');
background-repeat:repeat-x;
background-position:top;
padding-top:20px;
padding-left:15px;
margin-top:20px;
}
/* menus footer */
div#footerWrap ul#mainMenu,
div#footerWrap ul#myMenu,
div#footerWrap ul#othersMenu
{width:180px; float:left;}
div#footerWrap ul#mainMenu li a,
div#footerWrap ul#myMenu li a,
div#footerWrap ul#othersMenu li a
{
color:#dadada;
text-decoration:none;
padding:5px;
}
div#footerWrap ul#mainMenu li a,
div#footerWrap ul#othersMenu li a
{padding:5px 10px;}
/* hover */
div#footerWrap ul#mainMenu li a:hover,
div#footerWrap ul#othersMenu li a:hover
{color:#fff; background-color:#666;}
/* menu principal …推荐指数
解决办法
查看次数
CSS:"float:left"不能按预期工作
我想使用"float:left"显示2列图像,我不知道为什么第3张图像在右边.
请参见屏幕截图:http://dl.dropbox.com/u/72686/imagesFloat.png
见HTML:
<div class="field-item odd">
<img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%202.png" title=""><br>
<span>description1</span> </div>
<div class="field-item even">
<img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%203.png" title=""><br>
<span>description2</span> </div>
<div class="field-item odd">
<img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%204.png" title=""><br>
<span>description3</span> </div>
<div class="field-item even">
<img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%205.png" title=""><br>
<span></span> </div>
看CSS:
.field-field-image .odd {
padding-right:20px;
}
.field-field-image .even {
padding-left:20px;
}
.field-field-image .field-item {
float:left;
}
谢谢
推荐指数
解决办法
查看次数
如何在另一张图像上叠加10x10px图像？
我的网站上有一个用户头像.简单图像标签:
<img src="foo.jpg" class="userphoto" width="48" height="48" alt="">
现在,我想在图像左上角的图像上浮动图像(Facebook图标 - 10x10px).
这表示用户已通过Facebook验证.
我怎样才能做到这一点？图像标签上的CSS样式,或者我必须有一个绝对定位的单独div？
不需要透明或任何东西,只需要准确定位在左上角.
当然我不能只是物理修改图像,因为我需要根据Facebook状态确定是否动态覆盖图像.但我希望动态添加一个css类.
有任何想法吗？
回答:
得到它与两个答案的组合工作.使用div而不是另一个图像.
HTML:
<div class="foo">
<div class="fboverlay"></div>
<a>
<img src="foo.jpg" class="userphoto" width="48" height="48" alt="">
</a>
</div>
CSS:
.foo
{
position: absolute;
top: 0;
right: 0;
}
.fboverlay
{
background-image: url('/image/facebook/logo.gif');
position: absolute;
z-index: 1;
top: 10px;
left: 10px;
width: 10px;
height: 10px;
}
谢谢您的帮助.
推荐指数
解决办法
查看次数
如何避免CSS浮动包装
我有一个并排的2列页面(由float:left定义).
我的问题是,当我将浏览器缩小到更小时,右列将被删除到左列下方.
我怎么能避免这个？并且无论屏幕大小如何,仍然可以将它们并排放置.
谢谢
推荐指数
解决办法
查看次数
为什么漂浮然后清楚
向左漂浮然后向左漂移是什么意思.或向左浮动,然后向右清除？任何人都可以帮我理解这一点.我不是一个CSS人,但需要了解我正在使用的一些CSS.
#elem1{
float:left;
clear:left;
}
#elem2{
float:left;
clear:right;
}
推荐指数
解决办法
查看次数
浮动的内部<div>流出周围的<div>
请帮助我理解为什么image- div下面的代码中流出的box- div.
<body>
<div id="box" style="border: 2px solid green;">
<div id="image" style="height: 200px; width: 200px; background: red; float: left;"></div>
<div id="text" style="background: yellow;">This is some text</div>
</div>
</body>
换句话说,我期望绿色边框完全包围内部divs而不仅是黄色边框.
推荐指数
解决办法
查看次数
创建导航 - 内联块或浮动？
当我尝试使用内联块创建导航时,我会在每个列表项的右侧获得4px.
当我通过浮动每个列表项来做它,它工作正常.
有没有理由第一个选择是应用4px？我已经将一切设置为0px的边距和0px的填充,我不明白.即使Firebug报告它有0,但差距仍然存在.
谢谢
推荐指数
解决办法
查看次数
如何使用CSS并排放置两个块
我有一个徽标和一个二级菜单,我希望出现在同一行(最左侧的徽标和最右侧的菜单).徽标宽度未定义,辅助菜单宽度为200px宽.当我应用以下CSS时,二级菜单被推到徽标下方的行(但仍然在页面的右侧):
#logo {
padding-bottom: 40px;
}
.secondaryMenu {
width: 200px;
float: right;
margin-right: 0px;
padding-right: 2px;
color: black;
font-size: 9px;
letter-spacing: 1px;
text-align: right;
}
以下是HTML的相关部分:
<div id="logo">
<a href="index.html"> <img id="logoimg" border="0" alt="" src="images/logo.gif"/> </a>
</div>
<div class="secondaryMenu">
<a href="about.html">About</a> | <a href="services.html">Services</a> |
<a href="contactus.html">Contact Us</a>
</div>
我很欣赏任何关于我做错事的想法.
推荐指数
解决办法
查看次数
Div容器与图像和其他div彼此相邻
我正在尝试绘制一个容器,其中包含左侧的图像(缩略图)和图像旁边的几个div(垂直:在容器的中间).它们将包含按钮和下拉列表,除了纯文本之外,还可能包含其他内容.
我知道我需要使用float:left等等,但对我来说没有运气 - 看起来不是很好.所以我甚至不会举例说明我所取得的成就.相反,我将提供我的愿景:
我不想要一个表格解决方案,只需要div - 如果可能的话,当然.
有人可以用这个来帮助我们吗？
推荐指数
解决办法
查看次数
标签 统计
css-float ×10
css ×9
html ×7
alignment ×1
clear ×1
html-lists ×1
image ×1
navigation ×1
stylesheet ×1
word-wrap ×1
xhtml ×1