首先,为了极其清晰,这里有一个JS小提琴演示了我正在努力实现的目标:
http://jsfiddle.net/bb_matt/VsH7X/
这是解释 - 我的理由:
我正在使用1140网格框架创建响应式网站.这是一个相当复杂的布局.
我已经创建了一个可重用的简单库类,它可以放入任何已定义的列大小并使用媒体查询,我将相关的百分比宽度应用于li元素.每个li元素的右边距为5%.我在媒体查询中使用nth-child(xn + x)来删除每行末尾的右边距.
一切运作良好 - 随着布局调整大小,图像会调整大小,连续的图库项目数量就像我根据百分比定义的那样工作.
要解决的唯一问题是清除行之间.我无法添加额外的html标记,我想避开过于复杂的jquery修复.
我知道有两种方法可以解决这个问题,但我并不热衷于这两种方法.
首先修复,简单地使用display:liline上的inline-block,顶部垂直对齐,将正确地流动所有内容...... 但是,所有百分比都会被拍摄,并且图库项目不再整齐地适合分配的空间.
第二个修复,给列表项目一个高度.这是我必要的路线 - 根据分辨率需要不同的高度 - 没什么大不了的,但不是那么整洁.
我遇到了这个不寻常的Firefox(据我所知 - 我只针对Safari和Chrome进行了检查,并且正在使用Firefox 3.6)今天在工作中使用CSS bug,并设法用更小的代码片段重现问题,这里:
<!DOCTYPE html>
<head>
<style>
/*
* A small snippet of some CSS resets code from html5doctor and YUI fonts and resets
* added just to make sure it's not from weird browser padding/margin. Still happens
* if this is removed though
*/
html, body, div, span, p, ul, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}
body {
line-height: 1;
}
li {
list-style: none;
}
body { …clear在Outlook 2007/2010中不起作用,以及display(以及许多其他CSS属性).我该怎么用？
我需要支持此矩阵中的所有客户端,Lotus Notes除外.
仅供参考:我正在使用正在使用表构建所有基于网格的标记的XSL .但是,我有一个表格单位,以某种方式重叠另一个(仅在Outlook 2007/2010).
我在这里看到了这个相当不同的clearfix方法:http://www.marcwatts.com.au/blog/best-clearfix-ever/
它建议添加以下CSS代码,自动执行clearfix,并且不要求您向要清除的元素添加"clearfix"或类似的类.
/* our Global CSS file */
article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
ul:after { clear:both; content:"."; display:block; …这(http://jsfiddle.net/77RRA/1/)正在运行,而这(http://jsfiddle.net/77RRA/)则不然.
不是clearfix应该替换线<div style="clear: both;"></div>吗？
请注意这里提供的clearfix解决方案.
为什么为HTML [xmlns]定义了单独的样式？
这是针对特定浏览器设计的CSS黑客吗？
更新:这是有问题的代码,因为在我看来,一些答案显然是不合适的.
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
更新2:它已经或多或少地确定它是一个黑客.但我想要一个外部参考,详细解释它.例如,它适用于哪种浏览器,以及它究竟要修复哪些问题？
我有一个由PHP动态控制的简单图像库,用于添加和删除页面中的图像缩略图.我遇到的问题是我希望图像在彼此旁边对齐,直到该行没有空间并被迫启动另一行.
我已经尝试使用float:left哪个工作,但包含高度设置为自动调整大小的主体div不包括图像.然后我尝试添加clear:both;固定身体div问题的图像,但现在将图像直接放在彼此之下.
float:left在很多情况下我曾经使用过,但是包含的div有一个固定的高度.
有谁知道如何解决这个问题？
谢谢堆:)
我似乎无法做到这一点.它非常简单,清除h4元素(widget-title)之后的float,以便文本框在新行上左对齐.
HTML无法更改.
这是小提琴:http://jsfiddle.net/j29ubvjw/
.widget-wrap {
padding:15px;
background-color: #EEE;
}
.widget-title {
font-size: 18px;
margin:-15px 0 15px -15px;
background-color: #CCC;
padding: 15px;
float:left;
}
.widget-title:after {
content: "";
display: block;
clear: both;
}
<div class="widget-wrap">
<h4 class="widget-title">My Title</h4>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper</p>
</div>
</div>
我究竟做错了什么？
你好我在那里尝试了以下我认为应该是有效的CSS,它不起作用(用谷歌Chrome测试).
<ul>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
</ul>
CSS:
ul li {
float:left;
}
ul li:nth-child(3):after {
content:"";
display:table;
clear:both;
}
浮动列表元素应在响应式设计中的列表中的每个第三个元素之后开始一个新行.你有解决方案的建议吗？这不应该工作吗？
我在我的固定版面中使用nicolas gallagher的micro-clearfix.在我的布局中,绿色的页脚不会出现.这意味着clearfix无法正常工作
<div class="container">
<aside class="al">
</aside>
<section class="content">
</section>
<aside class="ar">
</aside>
<footer class="cf">
</footer>
</div>
CSS
.container {
width: 500px;
height: 400px;
margin: 0 auto;
}
.al {
background: red;
width: 100px;
height: 100px;
float: left;
}
.content {
float: left;
width: 300px;
height: 100px;
background: black;
}
.ar {
background: red;
width: 100px;
height: 100px;
float: left;
}
footer {
background: blue;
width: 100%;
height: 100px;
background: green;
}
和微清除
.cf:after, .cf:before {
content: " ";
display: …我已经到了这样的状态：
HTML
<div class="outer clearfix">
<div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="three">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
CSS
.clearfix:after {
content: '';
display: block;
clear: both;
}
.outer {
background: #ccc;
}
.outer div {
border-right: 1px solid red;
float: left;
padding: 10px;
width: 100px;
} …我想添加一个带类clearfix的div,但我需要在循环外添加它.有没有办法实现这一目标？
<div class="row">
<div class="col-xs-12 col-md-3 item" *ngFor="let item of items; let i = index;">
<div class="header">
<img src="{{item.image}}" *ngIf="!!item.image">
<h4>{{item.title | uppercase}}</h4>
</div>
</div>
<div class="clearfix" *ngIf="(i+1) % 4 == 0"></div>
</div>