简体繁体 English

使用或不使用flexbox填充可用空间

[英]Fill available space with or without flexbox

原文 2013-07-13 18:08:16 1 1 javascript/ jquery/ css/ css3/ flexbox

Inside my <main> element I have divs, each with the class .dataCard . 在我的<main>元素中，我有div，每个div都有一个.dataCard类。 Each .dataCard has the same minimum dimensions, but as soon as I started adding content to the .dataCard s I noticed the layout behaving weirdly. 每个.dataCard都具有相同的最小尺寸，但是当我开始向.dataCard添加内容时，我注意到布局.dataCard 。

The <main> element is separated into two columns each containing a .dataCard . <main>元素分为两列，每列包含一个.dataCard 。 I did this because I need the order of the .dataCard to go left-column, then one in right-column, one in left-column, and so on. 我这样做是因为我需要.dataCard的顺序为左列，然后为右列，左列，依此类推。

But when I fill the .dataCard s with content they push all the other cards down underneath them. 但是，当我用内容填充.dataCard ，它们会将所有其他卡向下推到它们下面。

How can I fill the available space with the .dataCard s so that the <main> element that contains them is as small in height as possible. 我该如何用.dataCard填充可用空间，以使包含它们的<main>元素的高度尽可能小。

Right now, in the link below, there is the second card in the right column, but then a bunch of whitespace and at the end of the second-card the 3rd card in the left column starts. 现在，在下面的链接中，右列中有第二张牌，但是一堆空白，在第二张牌的末尾，左栏中的第三张牌开始了。

How can I move the left column up, or in other words, make the cards fit the available space with or without flexbox? 无论有无Flexbox，如何使左列向上移动，换句话说，使卡适合可用空间？

I would greatly appreciate any and all help! 我将不胜感激任何帮助！

Here is the link: https://googledrive.com/host/0BwJVaMrY8QdcVDBweWk2UXlfTVE/KE.html 这是链接：https://googledrive.com/host/0BwJVaMrY8QdcVDBweWk2UXlfTVE/KE.html

1 个解决方案

From your question I understand that you want to fill the entire page with boxes without any space. 根据您的问题，我知道您想用没有任何空格的框填充整个页面。

This is what, exactly you wanted. 这正是您想要的。

如何将元素粘贴到视口顶部并填充视口的可用垂直空间——没有 JavaScript？ - How to stick an element to the top of the viewport and fill the viewport's available vertical space -- without JavaScript?

如何使flexbox元素填充剩余空间并滚动？ - How to make a flexbox element fill the remaining space and scroll?

CSS Flexbox将自动更改顺序划分为填充空白区域 - CSS Flexbox divs auto change order to fill empty space

如何让 flexbox 子项填充垂直空间？ - How do I get the flexbox children to fill up the vertical space?

如何让 CSS Grid Container 始终填充可用的垂直空间 - How to make CSS Grid Container Always Fill Available Vertical Space

如何告诉小部件最大化以填充整个可用空间？ - How can I tell a widget to maximize to fill the whole space available?

jQuery UI选项卡，其中的选项卡及其内容占可用空间的100％ - jQuery UI tabs where the tabs and their contents fill 100% of the available space

Flexbox 增长不会使一个元素填充所有空白空间，并且正在制作一些神奇的空白 - Flexbox grow is not making one element fill all of the empty space, and some magic whitespace is being made 🤔

Flexbox，其中一个框设置了flexBasis，其他框填充了剩余空间 - Flexbox where one box has set flexBasis with and the others fill remaining space

底部div渲染后如何使顶部div填充剩余高度？（没有flexbox） - How to get top div to fill remaining height after bottom div rendered? (without flexbox)

暂无

暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将元素粘贴到视口顶部并填充视口的可用垂直空间——没有 JavaScript？ - How to stick an element to the top of the viewport and fill the viewport's available vertical space -- without JavaScript? 如何使flexbox元素填充剩余空间并滚动？ - How to make a flexbox element fill the remaining space and scroll? CSS Flexbox将自动更改顺序划分为填充空白区域 - CSS Flexbox divs auto change order to fill empty space 如何让 flexbox 子项填充垂直空间？ - How do I get the flexbox children to fill up the vertical space? 如何让 CSS Grid Container 始终填充可用的垂直空间 - How to make CSS Grid Container Always Fill Available Vertical Space 如何告诉小部件最大化以填充整个可用空间？ - How can I tell a widget to maximize to fill the whole space available? jQuery UI选项卡，其中的选项卡及其内容占可用空间的100％ - jQuery UI tabs where the tabs and their contents fill 100% of the available space Flexbox 增长不会使一个元素填充所有空白空间，并且正在制作一些神奇的空白 - Flexbox grow is not making one element fill all of the empty space, and some magic whitespace is being made 🤔 Flexbox，其中一个框设置了flexBasis，其他框填充了剩余空间 - Flexbox where one box has set flexBasis with and the others fill remaining space 底部div渲染后如何使顶部div填充剩余高度？（没有flexbox） - How to get top div to fill remaining height after bottom div rendered? (without flexbox)

相关标签

粤ICP备18138465号 © 2020-2024 STACKOOM.COM