标签: css-float
为什么包装div不会在浮动元素周围扩展？
我在中心列中有两列.(它们都是div标签.)当我将内部div设置为时float:left,外部div不会包围内部div.
为什么,以及如何解决这个问题？
推荐指数
解决办法
查看次数
如何适应div的高度来包裹浮动的孩子
我有一个div缠着两个孩子,一个漂浮在左边,另一个漂浮在右边.我想在孩子周围放置一个边框和背景,但div有0高,因为它不会调整大小以适应孩子.
以下是它的实例:http: //jsfiddle.net/VVZ7j/17/
我希望红色背景一直向下.我试过身高:自动,但那没用.
任何和所有的帮助将不胜感激,谢谢.
PS我不想使用任何JavaScript,如果可能的话.
推荐指数
解决办法
查看次数
jQuery查找浮动li中每行的项目数
有没有办法找到其中浮动的项目(li标签)的数量:设置为左.假设我有大量的文件夹,这些文件夹由标签直观地表示.由于浮动行为一旦不适合单行,它们将被推下来给它行和列看.我的问题是ullili
使用jQuery ..etc有没有办法确定li每行的数量
码
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
</ul>
样式
ul,li{margin:0 0;padding:0 0;}
ul li{display:inline;float:left}
对于我的解决方案,李先生在F上排成一排,其余的排在下面.我想要一个jquery方法来获取第1行中的元素数量(在我的情况下为6).
A B C D E F
G H I J
上下文
我正在添加键盘事件以使用left,right,top,down导航到每个文件夹(li).左边就像突出显示下一个和上一个li一样简单.上下键需要转到下一行和上一行.现在你会得到它:)
推荐指数
解决办法
查看次数
如何使用包装器的整个高度浮动一个元素？
HTML:
<div class="wrapper">
<div class="left">
Foo
</div>
<div class="right">
Text row 1
</div>
</div>
<div class="wrapper">
<div class="left">
Foo Bar
</div>
<div class="right">
Text row 1<br>
Text row 2<br>
Text row 3
</div>
</div>
CSS:
.wrapper {
overflow:hidden;
}
.left {
width:80px;
float:left;
height:100%;
}
如何给浮动div提供包装器的整个高度(高度变化)？
没有jQuery可能吗？
推荐指数
解决办法
查看次数
CSS强制新行
我有这样的事情:
<li>Post by <a>Author</a></li>
我想在一个新行中显示链接,就像这样
Post by
Author
我怎样才能做到这一点？清除:左边不起作用.
推荐指数
解决办法
查看次数
在不影响设计的情况下,向右浮动一个div
我想在页面顶部向右浮动一个div.它包含一个50像素的正方形图像,但目前它会影响页面顶部50px的布局.
目前它:
<div style="float: right;">
...
</div>
我试过z-index,因为我认为这将是答案,但我无法理解.
我知道这很简单,我很遗憾,但我似乎无法指出它.
推荐指数
解决办法
查看次数
为什么添加float:left到我的css使我的链接无法点击？
我有一个视图,其中定义了一个部分:
<div id="QuestionBody">
<p><%=ViewData.Model.Body %></p>
<div id="QuestionEditLink"><%=Html.ActionLink ("Edit","EditQuestion","Question",new {id=Model.QuestionId},null) %></div>
<div id="QuestionHistoryLink"><%=Html.ActionLink ("History","ShowHistory","Question",new {postId=Model.PostId,questionId=Model.QuestionId},null) %></div>
<div id="AnsweringUser"><a href="/Profile/Profile?userName=https%3A%2F%2Fwww.google.com%2Faccounts%2Fo8%2Fid%3Fid%3DAItOawnZ6IhK1C5cf_9wKstNNfSYIdnRp_zryW4">Answered by Sam</a></div>
</div>
这会生成一个带有一些文本的部分,下面会有一些链接.我希望链接彼此相邻.我是css和web开发的新手,但是将它添加到我的样式表中:
#QuestionEditLink
{
color: #666666;
width:auto;
float:left;
padding:2px;
}
#QuestionHistoryLink
{
color: #666666;
width:auto;
float:left;
padding:2px;
}
并且嘿presto链接很好地对齐.不幸的是,它们也是不可点击的,实际上光标在移动它们时也不会改变.
那我做错了什么？如何使用css将两个链接对齐,以便它们仍然可以点击？
编辑:
此行为在chrome 8.0.552.215和firefox 3.6中.它的工作方式与我在IE 8中的预期一样令人讨厌.
EDIT2:
我已将页面添加到JSBin:http://jsbin.com/odefa4/edit ,它显示了该问题.只有问题的样式并显示问题,答案的链接工作正常...
推荐指数
解决办法
查看次数
在浮动元素周围放置边框
假设我有类似下面的代码,我希望在两个左右浮动的图像之间显示一些文本.
<img src="testImage1.png" alt="Test Image 1" style="float:right;" />
<img src="testImage2.png" alt="Test Image 2" style="float:left;" />
<p>Test Text</p>
我想在两个图像和文本周围添加边框.我尝试<div>使用以上所有3个标签style="border:2px black solid;".虽然这增加了边框,但似乎没有考虑图像.也就是说,我们得到类似以下内容(使用StackOverflow和Google徽标).
我猜这种情况正在发生,因为浮动元素并未被视为其中的一部分<div>.我是一名软件开发人员,而不是Web开发人员,所以我不是CSS的专家.但我确实认为我记得浮动元素在某种程度上是"被忽视"的.任何人都可以详细描述发生了什么以及如何解决它？
推荐指数
解决办法
查看次数
为什么溢出:隐藏有意想不到的副作用,高度增长,以包含浮动元素？
这个小提琴最好用以下HTML 解释这个问题:
<div class="outer">
<div class="inner-left"></div>
<div class="inner-right"></div>
</div>
CSS:
.outer {
width: 100px;
border: solid 5px #000;
}
.inner-left {
float: left;
height: 200px;
width: 50px;
background: #f00;
}
.inner-right {
float: right;
height: 200px;
width: 50px;
background: #0f0;
}
基本上,我想知道为什么overflow: hidden导致外部元素在高度上增长,包含两个浮动元素？
推荐指数
解决办法
查看次数
如何使中间div填充浮动元素之间的空间？
我有三个div元素:左,中,右.左右是固定和浮动的.我想要的是中间div填补它们之间的空白.
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<style>
* {border: dotted 1px red;}
#left {
width: 200px;
float: left;
}
#middle {
float: left;
}
#right {
width: 200px;
float: right;
}
</style>
</head>
<body>
<div id="left" > left </div>
<div id="middle"> middle </div>
<div id="right" > right </div>
</body>
</html>
关于如何做到这一点的任何想法？我尝试了不同的解决方案,但没有设法做我想要的.
推荐指数
解决办法
查看次数