两个flexboxes的高度相同

文章/答案/技术大牛

发布

2回答

html、css、flexbox

更新:感谢大家的友好评论。我采纳了isherwood的建议，使用flexbox和pytth对id/ class命名的评论。现在，我有了这个，但是两个flexboxes的高度不一样。我做错了什么？以下是我更新的HTML： <section class="featured movie"> </div>

浏览 34提问于2021-06-17得票数 0

1回答

将flexboxes缩小到与最短框相同的高度

html、css、flexbox

我目前有一个flexbox布局，看起来像这样：蓝色表示class = "wrap"，橙色和所有三个黄色框包含在两个单独的class = "wrap_col“中，每个黄色框包含在class =wrap_item { display: flex; flex-direction: column; 我如何缩小三个黄色盒子的高度，使其与橙色盒子的高度相同？你能把

浏览 0提问于2017-02-08得票数 5

0回答

如何使用嵌套的flexboxes在<li>中将2个div与动态内容垂直对齐

html、css、flexbox

所有div都有高度不同的动态内容。我们正在使用flexboxes来使每个li的高度相同。content</div> <div class="2">Some co

浏览 2提问于2016-12-19得票数 0

2回答

神秘的高度100%不起作用

html、css

如果我把它放在一个固定的高度上就好了。例如500px。但这就给Responsive带来了一个问题。我已经尝试了上千个公式。显示:块、内联、自动等。但似乎没有什么能给出好的结果。这里我留下了简化的代码，如果有人能告诉我什么是失败的。谢谢!

浏览 1提问于2015-12-28得票数 2

1回答

为什么inline-block不能使div内联？

html、css、frontend

我想使用inline-block创建一个内联div，但它不起作用，它会变成下面的两个div中的一个，以及上面的另一个#div-on-the-left {</div>我也尝试过给#div-on-the-left inline-block，这让#big-div-on-the-right在上面，但在#div-on-the-left应该在的地方留下了一个空白

浏览 0提问于2020-11-16得票数 0

3回答

嵌套Flexbox拉伸图像

html、css、flexbox、responsive

我正在尝试有两个嵌套的flexboxes，在最里面有一个居中的图像，它将始终适合它的容器，同时保持它的比例，而不会被拉伸。在这里，宽度被正确缩放，但高度在容器变得太小时立即被拉伸。我如何防止这种情况发生？提前感谢！雅克

浏览 30提问于2017-01-31得票数 0

回答已采纳

3回答

带页眉和页脚的可滚动div

html、css

我有一个带有标题的聊天模板(聊天用户列表，我不知道页眉的高度，它取决于人的数量，所以固定的高度不是交易)和页脚(字段)。在这两个div之间，我想发消息。使用display: table表示父和显示:对于页眉和页脚有1px高度的表行只能在webkit浏览器中很好地工作，firefox和IE忽略了这一点。有一个。由于旧浏览器支持，无法使用Flexboxes和calc属性。

浏览 7提问于2016-10-31得票数 0

2回答

Flexbox没有采用完整的高度

css、html、flexbox、materialize

在我的webapp的布局中，我无法让主内容的容器(#loading)占据屏幕的剩余高度。通过使用flexboxes，我设法让<main>增长，但它包含的内容却没有增长。 JSFiddle示例：

浏览 0提问于2015-08-04得票数 1

2回答

Flexbox -三行换行以适合两行的高度

javascript、css、reactjs、twitter-bootstrap、flexbox

Flexbox新手，正在尝试了解它是如何工作的。到目前为止，我有一个React /bootstrap代码的Code Sandbox。我正在创建一个时钟组件，它将有两个按钮(一个用于增加时间，另一个用于减少时间)。这是一张图片： ? 我想保留这个组件的高度，因为它对我来说是完美的，但我想在旁边的单独列中添加三行按钮(开始，暂停，第一行)。我想让这第二列换行，并与左侧时钟的高度相匹配。然而，我得到的是： ? 我试过创

浏览 63提问于2021-09-18得票数 0

回答已采纳

1回答

菜单不水平显示

html、css、menu

我正在遵循Foundation Top Bar的教程，当在浏览器(Firefox和Chrome)上运行代码时，它会垂直显示，而不是水平显示。现在，它没有通过app.css文件覆盖CSS，只有foundation.css文件中的开箱即用css。你知道是什么原因造成的吗？

浏览 0提问于2017-06-10得票数 0

1回答

css: FlexBox css

css、flexbox

我和FlexBoxes有个问题-我想重要的是:我知道，没有FlexBoxes就可以实现这一点--真正的页面/目的有点不同。

浏览 0提问于2015-01-12得票数 0

回答已采纳

1回答

弹出式元素不会一直滚动到底部

html、sass

我正在尝试弄清楚如何让我的元素总是滚动到最后，而不管浏览器的高度是多少。我的最终目标是有一个不显示滚动条的弹出窗口，但如果内容超过弹出窗口的高度，您仍然可以滚动。最后，我在顶部有一个图像，它需要是内容的一半和一半(视觉上)。以下是我尝试过的方法：我建议通过下面的jsfiddle来看一下，这里的结果似乎有所不同，因为我用的是SASS代码而不是CSS。metus</p>

浏览 10提问于2019-04-24得票数 0

回答已采纳

1回答

使用百分比值填充flexbox项

css、html、google-chrome、flexbox

我使用Google Chrome中的flexboxes (只支持此浏览器)来创建动态布局。我在一个div元素中有n个子元素，它们应该以相同的比例共享整个空间。由于新引入的flex-boxes，这是没有问题的。但我还必须将每个内部div的高度设置为0。如果我想将这个div中的一个元素拉伸到100%的高度，它会使用给定值0而不是任何计算值。有没有其他方法可以让图片的高度</em

浏览 2提问于2011-12-26得票数 9

回答已采纳

2回答

在flexbox中对齐文本的媒体查询

html、css、flexbox

我有两个flexboxes并排，当屏幕尺寸减小时，在媒体查询下一个堆叠在另一个之上。左边的框有左对齐的文本，右边的框有右对齐的文本。激活媒体查询时，是否可以将两个弹性框中的文本居中对齐？请张贴代码，如果这是可能的。谢谢。 /* Container for flexboxes */ display: -webkit-flex;}

浏览 16提问于2019-03-01得票数 0

回答已采纳

1回答

相同大小的flexboxes被Highcharts打破

css、highcharts、flexbox

我正在尝试使用flex项目创建两个高度相同的堆叠图。例如，请参阅以下代码。在尚未创建图表时，两个图表容器#chart1和#chart2的大小是相同的，但在创建之后(通过单击按钮)，情况就不同了。

浏览 11提问于2021-08-21得票数 0

2回答

如何使用css3 flexbox创建多栏布局而不进行垂直扩展？

google-chrome、css、webkit、flexbox

这是我的目标的草图：这是我尝试的jsFiddle：，这似乎很好用，除了每个.group将扩展其高度，而不是创建多个列。我在这里广泛使用了flexbox。不幸的是，通过扩展.group高度，每个#content最终都变成了一个单独的列，这导致了垂直滚动条(不需要的)。如果我将每个.group的高度设置为固定的像素大小，这些项目将被分成多个列，但这会破坏flexbox的流动性。下面是固定<

浏览 1提问于2012-12-28得票数 16

回答已采纳

1回答

如何在闪亮的应用程序中使用响应式设计？

r、shiny、responsive-design

有没有可能为闪亮的应用程序实现响应式设计？在浏览器中，我的应用程序看起来很好，可以按预期使用。如果我试图在智能手机或平板电脑上使用它，如果没有大量的滚动，它是无法使用的。我可以让我的应用程序在不同的设备上响应吗？ Thx和问候Derlu

浏览 5提问于2020-12-23得票数 0

2回答

垂直对齐圆形列表元素超链接

css、list、alignment、vertical-alignment

我有一个有两个div的标题，第一个(向左浮动)是一个简单的水平无序水平列表，它在垂直方向上居中(标题的行高与高度相同，垂直对齐: centered )。第二个div漂浮在右边，它也有一个水平的无序列表，但是它有圆形(边框半径: 50%)的超链接，其中根本没有文本(它们将被用作图标，带有背景图像)。不管header的大小如何，第一个div都会正确对齐，而第二个div会留在顶部。我的代码：{ bac

浏览 0提问于2017-09-30得票数 1

3回答

chrome不尊重柔性盒中的图像高宽比

html、css、google-chrome、responsive-design、flexbox

Flexboxes使基于可用空间的布局变得更容易，并且智能地缩小布局。我使用这个特性绘制了两个图像，每个图像占用了屏幕宽度的一半。在火狐浏览器中，图像呈现和保持其纵横比，但在Chrome中，图像水平压缩到每幅图像的50%，并且垂直地保持完整的高度。下面是我说的内容的演示：.flexbox { display: flex;img {} <div class

浏览 3提问于2015-10-28得票数 14

回答已采纳

2回答

在Chrome中不工作的自动兄弟div的CSS高度100%

html、css、google-chrome

我有一个带2个div的div。第一个决定高度，第二个确定这个高度。但铬不想这么做。

浏览 5提问于2014-06-09得票数 0

回答已采纳

点击加载更多