标签: css-float
如何用CSS包装内联块中的行？
我有一个简单的HTML结构(jsfiddle):
<li>
<div class="buttons">
<a href="done"><img src="done.png"></a>
</div>
<div class="owners">
???? ??????? ? ???? ????????
</div>
<div class="text">
?????-???? ?????-???? ?????-???? ?????-????
</div>
</li>
buttons,owners并text有display: inline-block.
当text相当小时,这看起来很好:
但是,随着文本的增长,inline-block元素会延伸并最终落在该行上:
这很难看,我想避免这种情况.
我想要实现的是:
当文本太大而无法放入元素内部时,我希望它被行包裹.
我尝试设置float: left元素,但无法使它工作.
使用HTML和CSS(没有表格)执行此操作的正确方法是什么？
推荐指数
解决办法
查看次数
float:在IE7中直接换到新行
我一直坚持浮动问题一段时间,所以我希望社区可以再次帮助我.我在这里有一个新的网络表单.像往常一样,除了IE7(或IE8的兼容性)外,它看起来都很好.
由于某些原因,某些容器最终会在表单文本下方的新行上以表单字段结束.CSS不是我的强项,否则我能够解决这个问题我肯定.谁能告诉我这里缺少什么？
我尝试将float:left添加到表单文本中,但结果却是另一个混乱.
推荐指数
解决办法
查看次数
CSS:浮动元素时对边距折叠问题的清晰解决方案
示例HTML + CSS:
<html>
<body style="padding: 0; margin: 0;">
<div style="float: right;">first</div>
<div style="margin-top: 2em;">second</div>
</body>
</html>
所需的行为:将firstDIV浮到窗口的右上角. 实际行为:它漂浮在所需位置下方2em处. 原因: 保证金崩溃.
尽管发现了问题,但我能提出的解决方案感觉就像黑客一样:
- 改变
body风格margin: -1px 0 0 0; border-top: 1px solid;. <div style="height: 1px; margin-bottom: -1px;"></div>之前插入first<div>在first和之间插入上面的内容second
是否有一种清洁,惯用的方法来避免这个问题？
推荐指数
解决办法
查看次数
如何使用CSS强制HTML列表中的水平滚动？
我有一个这样的列表:
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
和以下CSS:
ul {
width: 160px;
height: 100px;
overflow: auto;
}
li {
width: 80px;
display: inline-block;
float: left
}
我正试图强制列表项从左到右显示,即
one - two - three - four
我的问题:
这样做会给我两行,每行两个项目.
问题:
是否有CSS方法强制列表项全部在一行中,所以我可以使用水平滚动？现在如果我设置溢出:auto我只是得到垂直滚动条,我不想要.
我不想在包装div上设置它.我只是好奇我是否可以单独使用列表中的CSS解决方案.
感谢帮助!
推荐指数
解决办法
查看次数
容器div忽略浮动元素的高度
好吧,所以这似乎是一个非常愚蠢的问题,但我无法让我的容器div继承其中浮动元素的高度.由于我需要集中容器div,我不能使用float来解决这个问题.这是我的css:
#container {
margin: 0 auto;
width: 1000px;
border-left: 1px solid #f1f1f1;
border-right: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
}
#focus {
padding-left: 23px;
width: 977px;
padding-top: 20px;
padding-bottom: 23px;
border-bottom: 1px solid #f1f1f1;
float: left;
}
.rslider {
float: left;
width: 600px;
margin-left: 15px;
}
.welcome {
float: left;
width: 300px;
}
HTML:
<div id="container">
<div id="logo_block">
<a href="#"><img src="img/logo.jpg" alt="" /></a>
</div>
<div id="focus">
<div class="welcome">
<h1>All About This Page</h1>
<p>Donec quam felis, ultricies nec, pellentesque eu, …推荐指数
解决办法
查看次数
扩展具有100%高度的父容器以考虑浮动内容
我正在努力与客户项目.我所有的div■找没有绝对定位,height:100%对html,body和容器div秒,但静态内容差一点就其内容(在910px).
我可以将overflow属性更改为auto,并且背景将继续向下到内容的结尾,但它会添加一个滚动条,静态内容的下边框div保持在同一位置(910px).
更新:开发链接不再有效,所以我删除了它.可以说Animuson的彻底解释是这个线程的重要部分,并解决了容器不能扩展以匹配其内容的问题. - Ty
推荐指数
解决办法
查看次数
使用float:left时CSS背景消失
这是我的HTML:
<div class="header_wrapper">
<div class="main_nav">
<div>TEst</div>
<div>TEst</div>
<div>TEst</div>
</div>
<div class="clear"></div>
</div>
如您所见,我想构建一个带有浮动div的菜单.这样做main_nav的背景消失了.
.header_wrapper{
height:129px;
background:url('images/layout/header.png') no-repeat #1f1f1f;
border-bottom:1px solid #1f66ad
}
.header_wrapper .main_nav{
position:relative;
top:77px; left:336px;
width:750px;
background:red;
}
.header_wrapper .main_nav div{
float:left;
}
.clear{
clear:both;
}
我试图使用clear:两者,但背景仍然消失.有什么想法吗？
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
垂直居中浮动div的内容
我如何对浮动div(我不知道的高度)的内容进行真正的中心化？
有非常简单的HTML和CSS(见这个小提琴:http://jsfiddle.net/DeH6E/1/)
<div class="floating">
This should be in the middle
</div>
?
.floating {
height: 100px;
float: left;
border: 1px solid red;
vertical-align: middle;
} ?
如何使句子"这应该在中间"真的出现在中间(垂直居中)？vertical-align: middle似乎不起作用.我试过了display: table-cell,也没用.解决这个问题的最佳方法是什么？我想避免插入任何其他HTML标记,只需通过CSS.
(只是说清楚:我不知道容器的实际高度,100px仅用于示例)
编辑:我希望你了解我,所以......总是当我设计网页时,我遵循HTML保存内容的规则,CSS负责视觉风格.我从来没有将它们混合在一起或只使用一个来启用另一个.在这种情况下,我也想坚持这条规则.我不想只为CSS插入HTML元素.
推荐指数
解决办法
查看次数
CSS:在标题内放置div左/中/右
我一直在尝试创建一个具有以下结构的站点:
所需的结构http://i50.tinypic.com/vhw076.png
但我似乎无法使标题正确(e1左,e2居中,e3右).我希望三个元素e1,e2和e3分别位于左侧,中间和右侧.这就是我正在尝试的:
<div id="wrapper">
<div id="header">
<div id="header-e1">
1
</div>
<div id="header-e2">
2
</div>
<div id="header-e3">
3
</div>
</div>
<div id="nav">
links
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
有了这个css:
#wrapper
{
width: 95%;
margin: 20px auto;
border: 1px solid black;
}
#header
{
margin: 5px;
}
#header-e1
{
float: left;
border: 1px solid black;
}
#header-e2
{
float: left;
border: 1px solid black;
}
#header-e3
{
border: 1px solid black;
}
#nav
{
margin: 5px; …推荐指数
解决办法
查看次数