标签: css-float
具有不同高度的CSS浮动Div与它们之间的空间对齐
我正在使用左浮动DIV来模拟两列布局(每个div包含用于编辑不同数据的文本字段,如名称,爱好,......).所以看起来应该是这样的
1 2
3 4
5 6
现在我的div-box并不总是相同,因为有些DIV比其他DIV有更多的元素.现在我的布局看起来像这样
1 2
2
3 4
5 6
如果您缩放,则还可以看到此示例的效果,以便仅显示四个或三个列.例如,如果连续显示4列,则Float 1和Float 6之间有很多空间.这在我的UI上看起来不太好.我想要的是Float 6跟Float 1之间没有空格(除了我定义的边距)
编辑:我的DIV基本上只包含一个浮点数:左边和宽度:40%,这样两个适合屏幕
这是一个截图显示更多 
推荐指数
解决办法
查看次数
"更好"漂浮在CSS中
我正在试验CSS和float属性.我有这个"网站",有很多div与80px网格对齐,并且float: left:
CSS中是否有一种方法使它看起来像这样 - 所以元素可以使用它们上方的空白区域？
没有JavaScript,如果可能的话.
谢谢,马丁.
推荐指数
解决办法
查看次数
CSS相对+右(或底部)几乎从不工作
我已经写了很长一段时间了.
我注意到了
<div style="position: relative; right: 20%; bottom: 20%;">some text</div>
永远不会有效
相对定位适用于指定的左侧和顶部,但不适用于右侧/底部.为什么？
快速解决这个问题是使用"绝对"而是以像素为单位指定右/底,但我需要一个理由.
如果我错了,请纠正我.无论外部容器是绝对放置还是相对放置,将容器的"相对"定位到容器的边界或者容器内的元件是否总是"绝对"定位没有多大意义？
谢谢.
推荐指数
解决办法
查看次数
如何在不包装图像的情况下浮动图像旁边的段落？
我想在图像旁边浮动一个段落,但不包装图像.像这样:
div.img {
float: left;
display: block;
margin: 15px 2% 0 2%;
width: 26%; /* I cannot use that */
}
div.info {
float: right;
display: block;
margin: 15px 2% 0 2%;
width: 66%; /* The width should be variable */
}
问题是,如果我将宽度设置为img和info,但是图像是可变宽度/高度,我可以这样做.它没有特定的宽度/高度.
在这种情况下我几乎迷失了.请向我推荐任何东西.我希望两个div彼此相邻而不包装..不指定盒子宽度.
任何解决方案......工作？
推荐指数
解决办法
查看次数
如何用css正确浮动两根柱子
这是我很久以前学到的东西之一,从来没有想过我是否真正以正确的方式做到这一点.
假设我们有这样的结构:
<div id="wrapper">
<div id="sideBar"></div>
<div id="mainContent"></div>
</div>
我们也说它wrapper的宽度为600px.
我应该漂浮sideBar left,mainContent right还是应该漂浮它们left？
另外,如果我设置一个固定的宽度,sideBar我该如何mainContent填充剩余的空间,类似于表的工作方式？如果我设置mainContent为display:inline-block并向width:100%下移动到下一行:/
注意:在我的特定场景中,我不想使用表格.
推荐指数
解决办法
查看次数
为什么<fieldset>是明确的浮动？
考虑以下测试用例,其中浮动元素和内联元素放置在一个<fieldset>对比<div>:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.float {float:right; background-color:red; height:200px;}
</style>
</head>
<body>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
</body>
</html>
渲染时,场集是200像素高(它们清除浮点数？),而div只有内联元素高.这种行为的原因是什么,是否有一种解决方法允许字段集的行为与div一样？
推荐指数
解决办法
查看次数
强制div包含浮动的子div
我正在尝试在Wordpress中自定义二十二主题.它有一个2列的布局设置:
<div id="main">
<div id="primary"></div>
<div id="secondary"></div>
</div>
和
#main {
clear: both;
padding: 1.625em 0 0;
}
#primary {
float: left;
margin: 0;
width: 100%;
}
#secondary {
float: right;
margin-right: 7.6%;
width: 18.8%;
}
我不确定还有其他相关的css属性style.css,我还没有认出来.无论如何,孩子在外面撒谎#main.我如何强制让孩子包含在div中#main？(除了减小宽度#primary,对我没有影响)
推荐指数
解决办法
查看次数
如何在纯CSS中创建相等高度的列
如何让你的div一直到达？如何填写父div的垂直空间？如何在不使用背景图像的情况下获得等长的列？
我花了几天时间谷歌搜索和解析代码,以了解如何尽可能简单有效地完成等长列.这是我提出的答案,我想在一个小教程中与社区复制和粘贴样式分享这些知识.
对于那些认为这是重复的人来说,事实并非如此.我受到了几个网站的启发,其中包括http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks,但下面的代码是独一无二的.
推荐指数
解决办法
查看次数
仅使用css在输入字段上切换标签上的样式(活动/焦点)
想知道是否有一种仅限css的方式来执行切换输入焦点上相应标签上的样式.到目前为止,我有:
$(document).on('focus active', 'input',function(){
$('label[for='+$(this).attr('id')+']').addClass('active');
});
$(document).on('blur', 'input',function(){
$('label[for='+$(this).attr('id')+']').removeClass('active');
});
HTML:
<div class="row">
<label for="contact_form_mail">Email</label>
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
</div>
和CSS:
.active{ color:red; }
编辑:我肯定知道孩子和兄弟选择器"解决方法",但重新排列干净的标记为纯粹的造型似乎不对,所以如果有另一种纯粹的CSS方式这个答案赢了!
推荐指数
解决办法
查看次数
Chrome加载强制浮动:右转到新行
我在chrome中遇到加载问题,只有在某些时候它一次加载它并且浮动在菜单中看起来很好,但有时它加载它比平常慢,它会导致浮动突破到一个新行.我注意到它通常只发生在硬刷新(F5)上,但有时候只是点击一下就会发生.
这在IE,Firefox或Safari中不是问题.任何人都有我的代码编辑来解决这个问题？
这是我的代码:
HTML:
$text .= '<div class="block-menu ">';
$text .= '<a class="block-menu-item logo gray" href="/"></a>';
$text .= '<a class="block-menu-item">Button 1</a>';
$text .= '<a class="block-menu-item">Button 2</a>';
$text .= '<a class="block-menu-item">Button 3</a>';
//Floats right
$text .= '<div id="block-menu-bar-button">';
$text .= '<a class="block-menu-item">Button 4</a>';
$text .= '<a class="block-menu-item">Button 5</a>';
$text .= '<div style="clear:both;"></div>';
$text .= '</div>';
$text .= '</div>';
CSS:
#block-menu-bar-button{
float:right;
display:inline-block;
overflow:hidden;
}
.block-menu{
position:relative;
width:70%;
text-align:left;
margin:auto;
padding:15px 0;
}
a.block-menu-item, div.block-menu-item{
display:inline-block;
margin:0 20px;
padding:2px 0;
border-bottom: 2px …推荐指数
解决办法
查看次数