Tag: css float

始终在区域内的顶部div

我创建了一个始终位于顶部的div .visibleDiv, #topLeft { position: fixed; width: 150px; border: solid 1px #e1e1e1; vertical-align: middle; background: #ffdab9; text-align: center; } #topLeft { top: 10px; left: 10px; } 我这样显示它 Top Left 但我也有一个叫做容器的div。 我希望topLeft留在该容器的左上角而不是屏幕的左上角。 我对css很陌生,一直在摸索如何实现这样的效果。 所以为了更清楚地解释,我想尝试达到这个效果 ______________ |Other things| |____________| ________________________________ | TOP LEFT MESSAGE| | |_________________| | | | | | | CONTAINER DIV | | | […]

浮动DIV以填充未使用的空间

使用某个API时,我使用的function基本上为我提供了几十种类别的设置。 为了显示这些,我选择了一个容器DIV并按组拆分设置(4x 25%宽度表),其中每个解析的组接下来出现。 这可以很好地处理可变数量的设置的小问题,导致剩余大量未使用的空间。 这是由于我将所有内容都浮动而导致的,但是最长的表会导致下一个表格显得更加向下。 CSS是否支持任何允许将这些表浮动到未使用空间的内容? 我突出了屏幕截图上最大的表格以强调。

CSS – 如何让一个相对元素跟我上下,但不是左右?

我有一个固定位置的父div,在div的内部我有一个相对位置的主div。 当我上下滚动它时,它跟着我(这是我想要的)但是当我从左到右(或从右到左)滚动条形图时我不希望它跟着我。 HTML: icons </div CSS: #wrapper { position: fixed; z-index: 1000; top: 155px; } #icons { width: 42px; position: relative; left: -67px; } 谢谢!!

沿父div高度跟踪的浮动div内容

我正在寻找一个HTML5 / jquery解决方案来附加一个浮动div(让我们称之为“A”)到父div的右侧(称为“B”)并让div A在滚动期间停留在屏幕上但在停止时停止它击中了div B高度的顶部或底部。 如果您已经看到浮动/绝对定位的社交媒体按钮保留在屏幕上(它是正确的概念),但我想限制浮动仅与div B的高度一样高或低。 以下是我制作概念动画的概念动画 如果你看看div B,我的目标是让浮动菜单在屏幕上上下滚动div B的高度,而不是在div B的上方或下方。 我们非常欢迎任何建议/帮助/代码剪辑。 先感谢您。

jQuery砌体留下差距

我试图在一个项目中使用jQuery Masonry并且它无法正常工作:网格的右上角有一个间隙。 我已经尝试调整网格宽度和边距,这导致每行一个块或所有块一起运行(但仍然有一个间隙顶部。) 虽然Masonry正在应用它的类并按预期为元素分配绝对定位,但它实际上看起来并不像块重新排列。 我确信我做错了什么,但现在我不太确定。 我从Stack(http://stackoverflow.com/questions/11695574/jquery-masonry-almost-always-empty-spaces)上的类似问题中找到了一个工作小提琴并仔细修改它以使用我正在工作的尺寸有了,它似乎无法处理这些元素的选择。 小提琴: http : //jsfiddle.net/dVPA9/4/

棘手的css / javascript浮动任务

我的设计有几个不同宽度/高度的div,我需要它们基本上漂浮到左上角。 一个简单的css float:left将无法工作,因为它一旦下降到新行就不会利用垂直空间。 我假设我需要使用jQuery来动态定位每个div,但我希望有人可以引导我朝着正确的方向前进。 这就是标准浮标的作用: 标准浮点数http://sofzh.miximages.com/javascript/diagram_float_left.gif 这就是我需要做的事情: 我需要什么http://sofzh.miximages.com/javascript/diagram.gif div的大小将随着网站内容的更新而改变,因此手动输入位置不是一种选择。

jQuery查找浮动li中每行的项目数

有没有办法在ul中找到具有浮动的项目数量( li标签) :设置为左侧 。 假设我有大量的文件夹,这些文件夹由li标签直观地表示。 由于浮动行为,一旦li不适合单行,它们将被推下来给它行和列看。我的问题是 使用jQuery ..etc有没有办法确定每行的li数 码 A B C D E F G H I J 样式 ul,li{margin:0 0;padding:0 0;} ul li{display:inline;float:left} 对于我的解决方案,李先生在F上排成一排,其余的排在下面。 我想要一个jquery方法来获取第1行中的元素数量(在我的情况下为6)。 ABCDEF GHIJ 上下文 我正在添加键盘事件以使用left,right,top,down导航到每个文件夹(li)。 左边就像突出显示下一个和前一个li一样简单。 上下键需要转到下一行和上一行。 现在你会得到它:)

使用jQuery扩展div,而不会将div移动到它上面

我试图通过基本信息网格获得类似于http://www.nokiausa.com/us-en/products/的效果,其中点击可以扩展相邻项目的信息。 我遇到的一个问题是扩展我的div正在使邻近的div移动 – 我想我可能必须使用克隆function来生成一个绝对定位的孩子,但我不确定我将如何实际做到这一点。 function growRight(){ $(‘#stuff1’).animate({ backgroundColor: “#FF8600” }, 750 ); $(‘#stuff1’).animate({ width: “510px” }, 750, function() {}); } ul{ display:block; width:520px; background-color:#888888; } li{ position:relative; overflow:hidden; display:block; float:left; height:250px; width:250px; background-color:#B8B8B8; margin:5px; } p{ display:block; } div.contentright{ position:absolute; top:0px; left:250px; width:260px; height:250px; } .clearLeft{ clear:left; } Stuff 1 This is a load of […]

确定浮动元素中的换行位置

假设我在容器 有六个 元素。 这六个div中的每一个都是一个正方形,并且CSS样式为float: left applied。 默认情况下,当它们到达容器 的边缘时,它们将换行。 现在,我的问题是,使用Javascript,是否可以确定包装在哪个元素? 如果它们在页面上显示如下: ___ ___ | 1 | | 2 | —– —– ___ ___ | 3 | | 4 | —– —– 我试图确定包裹发生在第二个和第三个元素之间。 如果你想知道我是否已经失去了理智,我试图这样做的原因是如果点击其中一个框,我希望能够通过一些花哨的shQueryy jQuery下拉行之间的信息区域。 ___ ___ | * | | ! | —– —– | Someinfo| ___ ___ | * | | * | —– —– […]

如何浮动不同高度的元素?

我正在开发一个响应式网页设计,将4列中的多个项目并排放置。 这些物品具有不同的高度,因此浮动不能正常工作。 这就是目前发生的事情: 漂浮错误http://sofzh.miximages.com/javascript/floating-wrong.png 关于如何使元素浮动的任何想法: 右浮动http://sofzh.miximages.com/javascript/floating-right.png 我想这应该适用于jQuery“砌体”,对吧? 但是我正在使用Zepto.js,我猜一个jQuery插件不起作用。 是否有任何纯CSS(CSS3)方式? 有些窍门? 如果这不适用于纯CSS或JS,则可以这样做: 浮动不同http://sofzh.miximages.com/javascript/floating-different.png 现在,第5行,第6行和第7行不会像你期望的那样“真正”浮动,但内部有一个隐藏的换行符(clearfix)。 纯CSS有没有办法解决这个问题? 例如,使用nth-child(4n+4)和伪选择器,如:after应用带content的换行符? 有什么想法吗? 任何聪明的技巧使这项工作?