我有一个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的痛苦相同.
目前我们可以采用哪种方法最强大？
这是HTML:
<div id="outer">
<div id="inner"></div>
Test
</div>
这是CSS:
#inner {
float: left;
height: 100%;
}
在使用Chrome开发人员工具进行检查后,内部div的高度为0px.
如何强制它为父div的高度的100%？
通常情况下,当我们想要DIVs连续使用多个时float: left,我现在会发现它的诀窍display:inline-block
示例链接在这里.在我看来,这display:inline-block是一个更好align DIVs的连续方式,但有任何缺点吗？为什么这种方法不那么流行float呢？
这个小提琴最好用以下HTML 解释这个问题:
<div class="outer">
<div class="inner-left"></div>
<div class="inner-right"></div>
</div>
CSS:
.outer {
width: 100px;
border: solid 5px #000;
}
.inner-left {
float: left;
height: 200px;
width: 50px;
background: #f00;
}
.inner-right {
float: right;
height: 200px;
width: 50px;
background: #0f0;
}
基本上,我想知道为什么overflow: hidden导致外部元素在高度上增长,包含两个浮动元素？
问题:我的loadMore()方法在每个容器的滚动上执行.
含义:loadMore()在父容器的每个鼠标滚动上执行(infinite-scroll-parent="true")
期望的结果:只有当infiniteScrollDistance满足条件时才能执行loadMore(),而不是执行任何细微的滚动.
我的代码受到demo_basic和demo_async的高度启发.
我的应用是一个照片库.我通过ajax调用加载照片,并将它们填充到缩略图指令转发器中.我在控制器初始化时禁用ng-Infinite-Scroll,并在回调成功时启用它.
<div class="thumbnails grid__item page--content">
<div id="gallery" class="unstyled-list"
infinite-scroll='loadMore()'
infinite-scroll-disabled='album.busy'
infinite-scroll-parent="true"
infinite-scroll-immediate-check="false"
infinite-scroll-distance='2'>
<my-photo-directive ng-repeat="photo in photos"></my-photo-directive>
</div>
</div>
我的咖啡代码没什么意外.它的逻辑是不重要的,因为如果我放置一个简单的console.log,问题仍然会发生.....
$scope.album.busy = true
$scope.loadMore = ->
$scope.$apply ->
$scope.album.busy = true
console.log('loadMore() been executed here')
我的缩略图指令是一样的.没有惊喜,当最后的照片被填充到转发器上时,我启用了组件.
app.directive 'myPhotoDirective', ['$window', ($window) ->
return {} =
....
link: (scope, element, attrs) ->
if scope.$last
scope.album.busy = false
我不知道我错过了什么或做错了什么.我希望有人会来这里帮助我.
谢谢.
当添加更多儿童DIV时,如何使父/容器DIV增长.
<div id="container">
<div id="child" style="height:100px;">
</div>
<div id="child2" style="height:100px;">
</div>
</div>
如何阻止绝对定位元素的父级折叠？
在以下代码中,外部div的高度为0:
<div id="outer" style="position: relative;">
<div id="inner" style="position: absolute; height: 100px;">
<p>This is the inner content.</p>
</div>
</div>
这与这个问题非常相似,你如何保持浮动元素的父母不会崩溃？,它处理浮动元素,但我尝试了一些解决方案(包括spacer和clearfix类),但它们不起作用.
谢谢!
我试图模仿twitter的bootstrap css框架使用的行列机制.
我有一个div包含一些其他div本身包含来自内容.在我的元素检查器中,它将容器显示为没有高度.div的高度不应该是它包含的元素的高度吗？
<div class="container">
<div class="row yellow">
<div class="column-1 red">
column-1
</div>
<div class="column-1 blue">
column-1
</div>
<div class="column-1 green">
column-1
</div>
<div class="column-1 orange">
column-1
</div>
<div class="column-1 red">
column-1
</div>
<div class="column-1 blue">
column-1
</div>
<div class="column-1 green">
column-1
</div>
<div class="column-1 orange">
column-1
</div>
<div class="column-1 red">
column-1
</div>
</div>
</div>
这是一个jsfiddle:
我注意到了一个奇怪的jquery.height()函数行为.看看下面的代码.
CSS:
div.text-field {
font-family: sans-serif;
margin: 3px;
float: left;
}
HTML:
<div id="someid">
<div class="text-holder">
<div class="text-field">text here</div>
</div>
</div>
JS:
console.log($("someid").find("text-holder").height());
0如果我float: left;在CSS文件中输出最后一行,如果我删除则输出实际高度float: left;.这种行为的原因是什么？我可以height()一起使用功能float: left;吗？
简而言之:
基本上,我只是想知道为什么过度使用:隐藏了包含浮动物品的容器.它不应该像这个图像中那样隐藏溢出的元素http://css-tricks.com/wp-content/csstricks-uploads/css-overflow-hidden.png
为什么会这样做而不是http://css-tricks.com/wp-content/csstricks-uploads/overflow-float.png
长版本:
非定位,非浮动,块级元素的作用就像浮动元素不存在一样,因为浮动元素相对于其他块元素不流动.内联元素环绕浮动元素以确认它们的存在.我知道溢出属性如何工作以及应用它的位置,并且清除浮动最好使用clearfix而不是overflow属性(尽管某些情况可能需要使用溢出清除).但是,我仍然不明白为什么它扩展了父元素,特别是当我们使用overflow:hidden时.为什么父元素只是"隐藏"溢出的浮动子元素？毕竟,我们不是隐藏溢出？
