最近我查看了一些网站的代码,发现每个人<div> 都有一个班级clearfix.
经过快速谷歌搜索,我了解到它有时适用于IE6,但实际上是什么是一个clearfix？
与没有clearfix的布局相比,您能提供一些带有clearfix的布局示例吗？
我有一个div包装两列布局的古老问题.我的侧边栏是浮动的,所以我的容器div无法包装内容和侧边栏.
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明确错误:
<br clear="all"/>overflow:autooverflow:hidden在我的情况下,唯一似乎正常工作的是<br clear="all"/>解决方案,这有点邋.. overflow:auto给我讨厌的滚动条,overflow:hidden肯定有副作用.此外,IE7显然不应该由于其不正确的行为而遭受这个问题,但在我的情况下,它与Firefox的痛苦相同.
目前我们可以采用哪种方法最强大？
我想问一下高度和浮子的工作原理.我有一个外部div和一个内部div,里面有内容.它的高度可能会根据内部div的内容而有所不同,但似乎我的内部div会溢出它的外部div.这样做的正确方法是什么？
<html>
<body>
<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
<div style="width:500px; height:200px; background-color:black; float:right"></div>
</div>
</body>
</html>我有<div>一些其中有一些<img>.每个人<img>都在自己的内心<div>.问题是外部div不会自动获取内容的高度,即使我将其高度设置为auto.同时为了显示内部div内联我将它们设置为float: left.但是,如果我删除浮动,外部div表现正常,并采取内容的高度.但我需要imgs内联.谁能帮我？
HTML:
<div id="gallery">
<div class="gal-foto">
<img src="http://farm3.staticflickr.com/2819/10183644713_c1f49eb81f_b.jpg" class="gal-img">
</div>
<div class="gal-foto">
<img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_b.jpg" class="gal-img">
</div>
<div class="gal-foto">
<img src="http://farm4.staticflickr.com/3764/10183532675_0ce4a0e877_b.jpg" class="gal-img">
</div>
<div class="gal-foto">
<img src="http://farm6.staticflickr.com/5331/10183598286_9ab37e273c_b.jpg" class="gal-img">
</div>
<div class="gal-foto">
<img src="http://farm6.staticflickr.com/5334/10183535585_04b18fa7da_b.jpg" class="gal-img">
</div>
</div>
CSS:
#gallery {
border: 1px solid;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
height: auto;
margin-top: 20px;
padding: 15px;
}
.gal-foto {
float: left;
margin: 3px; …我的mainContainer高度不遵循他们的孩子宽度
这是我的代码你有什么建议请指教.
我需要CSS解决方案而不是JavaScript,所以提前感谢
<div id="mainContainer">
<div id="leftContent">
</div>
<div id="rightContent">
</div>
</div>
这是我的CSS
#mainContainer{
width: 1000px;
/*height: 1000px;*/
height:auto;
margin-left:auto;
margin-right:auto;
background-color: #ff6600;
padding-bottom: 20px;
}
#leftContent{
height: 100px;
float: left;
width: 380px;
background-color: violet;
}
#rightContent{
height: 100px;
float: right;
width: 620px;
background-color: yellow;
}
该div#inner1和div#inner2是内部的div#outer,但仍然高度div#outer显示为0像素带height:auto.
如何获得外部div的子元素的高度？
这是我的代码:
#outer {
width: 300px;
height: auto;
background: #ccc;
}
#inner1 {
float: left;
width: 100px;
height: 100px;
background: #f00;
}
#inner2 {
float: left;
width: 100px;
height: 100px;
background: #0f0;
}<div id="outer">
<div id="inner1"></div>
<div id="inner2"></div>
</div>大多数clearfix技术都涉及在父容器的最底部添加内容,并且我更喜欢伪元素方法,因为它不会将不需要的元素添加到HTML中.
然而,最近我发现我正在处理一个有一些孩子漂浮但不是全部的容器.假设前两个孩子第一个漂浮在左边,第二个漂浮在右边.我需要一种方法来清除第二个元素之后的浮动,因此下面的内容不会被挤压在它们之间.有没有办法清除中间的浮动元素,但没有添加clearfix元素？
以下是一个例子:
HTML
<div class="container">
<div class="child">
first child!
</div>
<div class="child">
second child!
</div>
<div class="child">
third child!
</div>
</div>
CSS
.container {
width: 200px;
}
.child:nth-child(1) {
float: left;
background: yellow;
}
.child:nth-child(2) {
float: right;
background: red;
}
.child:nth-child(3) {
background: blue;
color: white;
}
请看这个jsfiddle,看看我现在有什么.
我有一个jsfiddle下面有一个我在内联块中显示的链接的例子,我不明白为什么在每个锚标签的开头都有某种填充或边距,也许有人可以帮助我,我不确定我是否错过了一些东西,但我似乎无法找出为什么那个填充物存在？
这是html代码:
<div class="wrapper">
<header class="main-header">
<h1>blah blah blah</h1>
<nav class="main-nav">
<ul class="main-nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Get a Quote</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
这是所有的css代码:
.wrapper {
width: 100%;
min-width: 960px;
}
.main-header {
position: relative;
width: 100%;
height: 60px;
background-color: #41a2cd;
}
.main-header > h1{
float: left;
margin: 11px 0 0 5px;
color: #073a4f;
}
.main-nav-links > li {
list-style: none;
display: inline-block;
}
.main-nav-links li > a {
text-decoration: none;
display: block;
color: #073a4f;
} …我在尝试设置一个内部没有文本的按钮时,遇到了一个有趣的HTML按钮标记行为,只有一个字体图标 - 没有文本的按钮会导致所有后续按钮都按下文本.仅当按钮具有height指定的属性时才会出现此问题.
<header>
<button><!-- No text here --></button>
<button>This button is pushed down</button>
</header>
button { height: 40px; }
起初我确信这是由于第一个按钮内部的字体图标做了一些奇怪的基线魔术,但正如你从最小的工作示例中看到的那样,当按钮内部根本没有内容时,行为就会得到维护.
我可以通过向第一个按钮添加内容来解决这个问题,但由于我的唯一内容是a <span class="icon user"></span>,这是一个字体图标,它实际上会干扰字体基线,并将按钮放在几个像素上.这就是为什么我决定将图标置于绝对位置,这解决了原来的轻微定位问题,但引入了这个新的,因为按钮现在就像是空的一样.
所以,问题仍然存在 - 如何避免使用空按钮定位问题？
注意:似乎以上只发生在webkit浏览器上; Firefox正确地定位了带有文本的按钮,但是将空的按钮向上推.
我正在寻找一种解决方案,以改善电子书中的报价格式.在电子书中我使用引文,每个都有内容和来源.这是HTML和CSS:
.quotation {
display: block;
text-align: justify;
margin: 0.25em 1em 0.25em 1.25em;
}
.quottext {
font-style: italic;
}
.quotsource {
margin: 0 0 0 0.25em;
}<p class="quotation">
<span class="quottext">Lorem Ipsum je demonstrativní výpl?ový text používaný v tiska?ském a kniha?ském pr?myslu. Lorem Ipsum je považováno za standard v této oblasti už od za?átku 16. století, kdy dnes neznámý tiska? vzal kusy textu a na jejich základ? vytvo?il speciální vzorovou knihu.</span>
<span class="quotsource">(The Lorem Ipsum Manual, page 6)</span>
</p>现在我使用CSS:
.quotation …