标签: css-float
浮动流体图像留下文本包装
没有理由这很难实现.回到路上,您可以创建一个表格,将图像放在第一个单元格上,将文本放在第二个单元格上.非常简单.
出于某种原因,我有一段时间让这个与CSS一起工作,我知道css非常流利.我敢肯定,我只是忽略了一个有希望的答案.
我想要实现的目标:
- 动态大小(从数据库中拉出)图像浮动到左侧 - 向右描述文本,当图像达到图像高度时,在图像下方包装.
什么行不通:
- 在文本上设置左边距(图像宽度不一致)
- 在文本上设置宽度/浮动权限(同样,图像宽度是动态的,因此文本上的正确宽度将是未知的)
示例代码(pre css):
<div class="demo">
<img src="dynamic_sized_image.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt …推荐指数
解决办法
查看次数
如何减少firefox缩放时浮动布局包装
给出以下HTML.它显示两列:#left,#right.两者都是固定宽度并具有1px边框.宽度和边框等于上部容器的大小:#wrap.
当我通过按Ctrl +缩小Firefox 3.5.2时 - 列被包装(演示).
怎么预防这个？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
div {float:left}
#wrap {width:960px}
#left, #right {width:478px;border:1px solid}
</style>
</head>
<body>
<div id="wrap">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</body>
</html>
推荐指数
解决办法
查看次数
是否有使用`display:table-cell`on divs的缺点？
我想要完成的是有一个固定宽度的第一个div和一个流动的第二个div,它将填充父div宽度的剩余宽度.
<div class='clearfix'>
<div style='float:left; width:100px;'>some content</div>
<div style='float:left'>some more content</div>
</div>
在这一点上,一切似乎都很好,流畅.
<div style='display:table'>
<div style='display:table-cell; width:100px;'>some content</div>
<div style='display:table-cell'>some more content</div>
</div>
我想继续第二个,但我觉得第二个例子将来会给我带来麻烦.
你能提供一些建议或见解吗？
推荐指数
解决办法
查看次数
将HTML复选框移动到其宽度的左侧
我不能使用任何JavaScript,如果可能的话,我想在CSS中找到答案.我在表单中有以下复选框:
<label for="autologin">Remember Me</label>
<input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1">
<div class="clear"></div>
使用以下CSS:
label {
float: left;
margin: 5px 0px;
}
input {
float: right;
margin: 5px 0px;
width: 200px;
}
.clear {
clear: both;
}
我可以在复选框中添加什么CSS使其显示在200px宽度的左侧？我对浮子(特别是垂直对齐)有点困难,但我听说这是正确的做法.
编辑:好的,所以很多人都建议不要将输入浮动到右边.如果是这样,我可能根本不使用浮点数,只需设置标签的宽度,并
在每一行之后.这是不可接受的做法还是我错过了 - 在这里使用花车？
推荐指数
解决办法
查看次数
为什么CSS中没有浮动中心？
我发现CSS中没有浮动中心,我有点失望.但是,我不禁问自己为什么.虽然很多人想用它来集中内容,但我希望用它来将一堆块浮动到动态页面大小的行上.不幸的是,没有浮动中心,它看起来很邋and,因为在一侧有额外的空间(整块不适合的任何部分).让我感到遗憾的是,这个属性的缺失会损害花车的预期用途.
我看不出为什么没有浮动中心的原因,并且想知道是否有人有理由,无论是技术还是其他原因为什么浮动中心不包括在标准中.
推荐指数
解决办法
查看次数
z-indexing浮动div
我有两个div浮动:左.我z-index第一个div在上面,但它不起作用.这是因为浮动元素没有定位？
<html>
<style>
#wrap{
background:#666;
}
#menu, #thumbs{
float:left;
}
#menu{
background:#06C;
z-index:10;
}
#thumbs{
background:#0CF;
margin-left:-20px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="menu">
<p>menu</p>
</div>
<div id="thumbs">
<p>thumbs</p>
</div>
</div>
</body>
</html>
推荐指数
解决办法
查看次数
收缩/收缩 - 适合div在css中回流浮动的div
我试图将一个div content调整大小调整为div符合一行的s 数.因此,当窗口大于所有item divs组合时,该示例工作正常,因此它们都在一行中,但是当窗口调整为较小,因此其中一个items被回流到下一行时,其content div宽度为100%而不是收缩包装.
我想要这个的原因是因为我可以使用内容上方的菜单栏集中内容,缩小到组合的重排内容的大小.
HTML:
<div class="wrapper">
<div class="content">
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
</div>
</div>
CSS:
.item {
float: left;
width: 70px;
border: 1px solid black;
}
.content {
display: inline-block;
border: 1px solid black;
}
.content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
推荐指数
解决办法
查看次数
包装器div高度为0,内部带有浮动元件
我有一个包装器<div>,其中包含两个<div>浮动的内部.
<div class="outside" style="border:1px solid #555;">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>
问题是包装器的<div>宽度为80px,因为两个内部<div>的每个都是40px.但总是包装<div>是0px在高度,这使得边框看起来像是在顶部线.
所以我将两个内部<div>放在一个内部<table>.它运作良好.但是如何避免这个问题<table>呢？
推荐指数
解决办法
查看次数
浮动导航到右边有固定位置？
我的站点导航需要浮动到容器的右侧,但是处于固定位置,这样每当页面滚动时,导航仍然是从顶部开始的右侧350px.这一直有效,直到我申请position:fixed,之后导航卡在右边.任何想法如何我可以充分利用这两个世界(右侧和固定位置)？
推荐指数
解决办法
查看次数
保证金如何运作？
我在下面提供marginfix了一个块级元素,one并且two也是块级别,但这些是浮动的.这就是为什么它们在同一行布局上,但marginfix也没有浮动的原因,并且块级元素应该低于元素,如下所示
+--------------------+ +--------------------+
| | | |
+--------------------+ +--------------------+
+--------------------------+
| |
+--------------------------+
但它的工作方式如下
+--------------------+ +--------------------------+ +--------------------+
| | | | | |
+--------------------+ +--------------------------+ +--------------------+
这是HTML
<div class="wrap">
<div class="one">one</div>
<div class="two">two</div>
<div class="marginfix">three</div>
</div>
CSS
.wrap{
width: 500px;
background-color: red;
position: relative;
margin: 0 auto;
}
.one{
width: 200px;
float: left;
}
.two{
width: 200px;
float: right;
}
.marginfix{
margin: 0 210px;
}
更新说明
有人可能会说marginfix包含浮动元素的剩余空间.如果是这样,如果我们改变html元素的顺序,为什么它不起作用.这个HTML不会像上面的html一样工作
<div class="wrap">
<div …推荐指数
解决办法
查看次数