标签: css-float
CSS容器不会伸展以容纳浮动
<html>
<head>
<style type="text/css">
.container {
width: 900px;
border: 2px solid #333333;
padding-top: 30px;
padding-bottom: 30px;
}
.container_left {
border: 2px solid #FF00FF;
width: 650px;
float: left;
}
.container_right {
border: 2px solid #0000FF;
width: 225px;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="container_left">
<div>LEFT CONTAINER</div>
<div>LEFT CONTAINER</div>
<div>LEFT CONTAINER</div>
</div>
<div class="container_right">
<div>RIGHT CONTAINER</div>
<div>RIGHT CONTAINER</div>
<div>RIGHT CONTAINER</div>
</div>
</div>
</body>
</html>
结果是:
我想要一个这样的结果:
推荐指数
解决办法
查看次数
如何在无序列表中均匀分发HTML列表项
我希望li构成水平菜单的ul元素在我的元素宽度上均匀分布.我通常float我的li元素左移,并添加一定的余量.但是如何设置合适的间距使它们从ul元素的左边延伸到右边缘？
每个之间的间距必须相同li.但li元素可能有不同的长度.
推荐指数
解决办法
查看次数
reStructured Text中浮动图像的工作示例
我正在寻找最好的方法来在reStructured Text中显示带有文本的图像.我发现有几个网站声称它们是如何完成的,但没有一个显示实际的功能示例.有几个显示了看似失败的例子.我实际上正在使用Sphinx(v0.6.6)并希望避免变态它所带来的"原生"CSS.
谢谢.
推荐指数
解决办法
查看次数
防止浮动的div包装到新行
我已经在SO上看过几次这样的问题,并且给出了相同的答案,这些答案在Chrome或Firefox中无效.
我想让一组左浮动的div运行,水平的父div与水平滚动条.
我能够在这里展示我想用这个糟糕的内联css做什么:http://jsfiddle.net/ajkochanowicz/tSpLx/3/
但是,根据SO*给出的答案,这应该有效,但不是我的结论. http://jsfiddle.net/ajkochanowicz/tSpLx/2/
有没有办法在不定义每个项目的绝对定位的情况下做到这一点？
推荐指数
解决办法
查看次数
如何垂直对齐浮动图像旁边的文本？
我想在浮动图像后垂直对齐跨度.我在堆栈溢出中搜索它并找到这篇文章.但是我的形象浮现了.
<div>
<img style="width:30px;height:30px; float:left">
<span style="vertical-align:middle">Doesn't work.</span>
</div>
我给vertical-align:middle图像,没有任何改变!
谢谢
推荐指数
解决办法
查看次数
CSS浮动权限无法正常工作
我的右浮动不起作用我的期望.
我希望我的按钮很好地对齐在我的文本右上方的一行:
<div style="padding: 5px; border-bottom-width: 1px; border-bottom-color: gray; border-bottom-style: solid;">
My Text
<button type="button" class="edit_button" style="float: right; margin:5px;">My Button</button>
</div>
然而它似乎总是悬停在线上.
如果我增加DIV的填充或边距,那么右边的按钮似乎仍然被推到底部的线上.
我试图用右边的按钮的填充和边距来玩,但我似乎无法将它整齐地放在文本旁边.
小提琴在这里:
非常感谢
推荐指数
解决办法
查看次数
浮动css后Div崩溃
我有一个名为NAV的div,在NAV内部我有一个5升的UL,我向左浮动,但是当我这样做时,NAV会崩溃.我知道这是因为我在NAV周围放了一个边框,看看它是否会崩溃.这是一个例子.
折叠了http://img401.imageshack.us/img401/8867/collapsedze4.png
没有倒塌http://img71.imageshack.us/img71/879/nocollapsedkx7.png
正如您在第一张图片中看到的那样,NAV div中的链接向左浮动,而黑色边框ontop是名为NAV的实际div.
在此图像中,您可以看到它是如何具有顶部和底部边框,并且它没有折叠.
这里是我使用的一些html和css.
alt text http://img301.imageshack.us/img301/5514/codejc8.png
#nav #ulListNavi a {
float: left;
}
推荐指数
解决办法
查看次数
我可以将DIV始终保留在屏幕上,但并不总是处于固定位置吗？
我有一个我的网站的主表单,我想将div停靠在主表单内的内容区域的顶部.尽管滚动位置,此div仍应始终可见.这可能吗？
一张图片可以更好地解释它.
推荐指数
解决办法
查看次数
中心对齐多个孩子DIV
我发现解决这个问题有点令人困惑.
我有父DIV和3个/更多Child DIV.
父DIV是居中对齐的,子DIV应该向左浮动,但应该对齐居中.
CSS包含,
.center {
float:left;
height:250px;
width:15%;
margin: 0 auto;
border: 1px solid black;
}
推荐指数
解决办法
查看次数
为什么要清楚:权利不按预期工作
我总是感到困惑clear: left,clear: right并clear: both在CSS.我知道clear: both它意味着它不允许自身两侧浮动元素.
我在这里做了一些测试.我认为布局会如下所示,因为B使用clear: both.但事实并非如此.有人能告诉我为什么吗？
一张
B
CD
更新 (发布代码)
<div class="container">
<div class="A">a</div>
<div class="B">b</div>
<div class="C">c</div>
<div class="D">d</div>
<div class="CB"></div>
</div>
.container{
width:100%;
border:1px solid red;
}
.B{
float:left;
clear:both;
width:10%;
height:30px;
border:1px solid blue;
}
.A,.C,.D{
float:left;
width:10%;
height:30px;
border:1px solid blue;
}
.CB{
clear:both;
}
推荐指数
解决办法
查看次数