浮动元素扩大垂直空间问题
我有一个布局,需要将项目列表组织成两个垂直列。这些项目位于
的单个列表中,标记也被重新用于移动设备,因此我不想修改结构。我这里遇到的问题是,每个项目都有一个用户可以切换的扩展内容区域,当该内容扩展时,该列的垂直空间需要向下扩展,而另一列保持固定。
现在我有一个带有浮动项目的基本解决方案,但是当我扩展内容区域时,垂直空间会在两列中扩展,而不仅仅是一列。
这是我现在拥有的功能示例的链接,下面是屏幕截图期望的行为应该是什么。
是否可以对其进行样式设置以支持所需的行为?或者我是否必须修改项目的结构才能使其正常工作?预先感谢您的帮助!
I have a layout that requires a list of items to be organized into two vertical columns. The items are in a single list of <div>
s, with the markup also being re-purposed for mobile, so I don't want to modify the structure.
The problem I have here is that each item has an expanding content area which the user can toggle, and when this content is expanded the vertical space for that column needs to expand downward with the other column staying fixed.
Right now I have a basic solution with floated items, but when I expand the content areas the vertical space expands in both columns instead of just the one.
Here's a link to an example of the functionality as I have it now, and below is a screenshot of what the desired behavior should be.
Is it possible to style this to support the required behavior? Or am I going to have to modify the structure of items in order to get this to work? Thanks in advance for your help!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
你的前提是有缺陷的。文档结构从左到右、从上到下流动。您需要对结构进行一些更改...最简单的方法是为左列和右列添加两个容器。否则,您将面临一些棘手的绝对定位标记和一点时髦的 jquery,我只能建议为每个面板添加一些唯一的 ID。
我个人会根据您的示例添加 id,例如
panel1
到panel4
,然后使用此 javascript(或类似的)作为起点:这些面板的 css:
对 html 的调整越少,在 javascript 中创建的工作就越多。
编辑:
建议使用替代 Javascript 来消除更改 HTML 的需要,假设每行有两个元素。因为我们知道该行是问题所在...
现在不需要对 HTML 进行任何更改,但您需要重做单击函数来处理单击后元素的重新定位。我会让生活变得简单,并在扩展新框之前隐藏所有
.more
项目,因为这意味着必须计算上面所有元素的高度,但您想要做多少工作是您的事。Your premise is flawed. Document structure flows left-to-right, top-to-bottom. You will need to make some change to the structure... Easiest would be adding two containers for a left column and a right column. Otherwise, you're in for some tricky absolute positioning markup, and a little funky jquery, which I can only suggest with the addition of some unique IDs for each of the panels.
I would, personally, add ids such as
panel1
throughpanel4
per your example, then use this javascript (or similar) as a jumping off point:With the default values in the css for those panels:
The less you tweak the html, the more work you'll create in javascript.
edit:
Proposed alternate Javascript to remove need to alter HTML, assuming two elements per row. Since we know the row to be the problem...
Now no changes need be made to the HTML, though you'll want to redo the click function to handle repositioning of elements after a click. I would make life easy and hide all
.more
items before expanding a new box, since it would mean having to calculate the heights of all elements above, but how much work you want to make is your business.这是一个用于四个面板的纯CSS解决方案(我不知道你是否打算拥有更多,而且我还没有六个[2宽3高]工作- -并怀疑这是不可能的)。它适用于 FF 和 IE8/9。请参阅小提琴: http://jsfiddle.net/bEgwB/203/
但是,IE8遇到了一个重绘错误,使面板3无法移动,因此它需要额外的javascript帮助(在上面的小提琴中添加),并且IE7需要一些边距调整以使面板4正确定位(但没有即使没有额外的 javascript 帮助,也会出现重绘问题)。 更新(11-18-11):这是 IE7 边距调整的小提琴:http: //jsfiddle.net/bEgwB/286/
编辑:我的 CSS 的早期版本有不必要的
display
调用。HTML
CSS
JavaScript
Here's a PURE CSS SOLUTION for four panels (I don't know if you intended to have more, and I do not have six [2 wide 3 high] working yet--and suspect it is not possible). It works in FF and IE8/9. See the fiddle: http://jsfiddle.net/bEgwB/203/
However, IE8 experiences a redraw bug that keeps panel 3 from moving so it needs extra javascript help (added in fiddle above), and IE7 needs some margin adjustments to get panel 4 positioned correctly (but does not have the redraw issue even without the extra javascript help). UPDATE (11-18-11): here's the fiddle for IE7 margin adjustment: http://jsfiddle.net/bEgwB/286/
EDIT: a previous version of my CSS had
display
calls that were unnecessary.HTML
CSS
JAVASCRIPT
您需要再添加两个 div - 左列和右列,并将项目拆分到这两个 div 之间。这就是如何使它们独立的方法,这里是 jsfiddle 。
HTMLCSS
You need to add two more div's - left and right column and split your items between these two divs. This is the way how to make them independent, here is jsfiddle for this.
HTML
CSS
也许你可以像这样执行
column-count
属性:检查这个小提琴 http:// /jsfiddle.net/bEgwB/87/
更新
检查一下:
http://jsfiddle.net/bEgwB/276/
May be you can do it
column-count
property like this:Check this fiddle http://jsfiddle.net/bEgwB/87/
UPDATED
Check this:
http://jsfiddle.net/bEgwB/276/
有一个样式解决方案。要将两列连接在一起,它们需要额外的绑定级别,您可以通过向“container”、“display:table”和带有“display:table-cell”的面板添加样式属性来实现。
这将使高度保持同步。 “容器”和“面板”类都必须有声明的宽度,否则它们真的会弄乱布局。 IE 对这些属性的支持很弱,因此这可能是解决方案的问题。
There is a styling solution. To tie the two columns together they need an extra level of binding you can do that by adding a style attribute to "container", "display:table" and to the panels with "display:table-cell".
That will keep the heights in synch. Both "container" and the "panel" class must have a declared width or they really mess up the layout. IE is weak on support of these attributes, so that could be a problem with the solution.
如果我理解正确的话,你想要的是这样的
http://jsfiddle.net/bEgwB/275/
您需要使用两个 css 属性 display:inline-block 和 float:left 来实现像 jpg 一样的效果。如果我的标记正确并且看起来符合预期,我可以帮助您使用 javascript,如果现在不行
祝您好运。
If I correctly inderstand, that do you you want is something like this
http://jsfiddle.net/bEgwB/275/
You need to use both css properties display:inline-block and float:left to implement effect like on your jpg. If my markup right and this looks as expected, I may help you with javascript, if it not ok now
Good luck.