flexbox中css网格元素的自动高度

文章/答案/技术大牛

发布

1回答

html、css、flexbox、overflow、css-grid

各种卡片列表将在这个主要组件中动态呈现。主要组件应为100vh高。单独的名片单应该占据可用的空间。如果没有足够的空间，卡片列表的网格应该是可滚动的。为此，我使用flex-box作为主要组件。在主组件中的每个单独的项接收css类flex: 1。这应该允许所有项使用可用的空间。然而，问题是，单个项目总共使用了超过100vh，因为没有激活溢出...如果我在类cardList flex

浏览 19提问于2020-01-02得票数 0

1回答

Css网格绕排列保持行高

css、css-grid

我不确定这是否可以通过css grid和/或css flexbox来解决，但我想我应该试一试，在这里问一下。但是，我还想要的是，基于该行中高度最高的单元格，行高是相等的。为了说明这

浏览 8提问于2017-08-15得票数 0

2回答

了解按钮高度是如何设置的

html、css、bootstrap-4

我的代码(full version)： <div class="modal-body"> <div class="row">option value="High">High</option> </div> </div> &l

浏览 6提问于2019-06-02得票数 1

1回答

CSS中是否有一个TOP值可以根据前一个元素的长度动态定位元素？

javascript、html、css、css-position

我是CSS的新手。<div id="A"></div> </div> 如果这些div元素都是全宽的，我希望一个元素根据前一个元素</

浏览 0提问于2020-07-19得票数 0

5回答

在CSS网格中，每行可以有不同数量的列吗？

css、css-grid

div class="col"></div> <div class="col"></div>这是否可以通过CSS

浏览 14提问于2017-12-03得票数 33

回答已采纳

2回答

CSS网格布局中的等高行

css、flexbox、grid-layout、css-grid

我猜这是使用Flexbox不可能实现的，因为每行只能是适合其元素所需的最小高度，但是使用较新的CSS Grid能否实现这一点呢？为了清楚起见，我希望网格中的所有元素在所有行中的高度相等，而不仅仅是每行的高度。基本上，最高的“单元格”应该指示所有单元格的高度，

浏览 2提问于2017-06-12得票数 166

回答已采纳

2回答

相同高度元素-引导

html、css、twitter-bootstrap

我想让我的列表中的所有元素保持相同的高度，即使其中一个元素中有更多的文本，如果其他人能够进行调整，那就太好了。我使用过div，但没有问题要改到li，实际上我正在寻找解决这一问题的最佳方法。我正在使用twitter引导，以稀释我的问题，我已经准备了示例。

浏览 0提问于2016-01-24得票数 0

回答已采纳

5回答

防止flex项高度展开以与其他flex项匹配

html、css、flexbox

我在一个容器中有两个元素，它们是通过使用flex框并行的.在第二个元素(.flexbox-2)上，我在CSS中设置它的高度。然而，第一个元素(.flexbox-1)将匹配.flexbox-2的高度。我如何阻止.flexbox-1与.flexbox-2的高度匹配，而只保留它的自

浏览 2提问于2014-12-20得票数 121

回答已采纳

3回答

如何防止内容调整flex项目的大小？

html、css、charts、flexbox

我正在使用CSS flexbox来构建一个可伸缩的、响应式的网格。当将Google图表应用于其中一个flexbox项目时，该项目的大小会发生如此微小的变化。这足以使网格失去对齐。将Google chart应用于项目6之前的Flexbox网格：将Google chart应用于第6项后的Flexbox网格：Flexbo

浏览 0提问于2016-03-29得票数 16

回答已采纳

1回答

具有CSS响应的水平网格

css、twitter-bootstrap、responsive-design、grid、flexbox

我试图用相同高度但长度可变的盒子建立一个响应网格。这些框需要填充保持正确比率的图片，而不需要拉伸(例如图像大小: 400x400,600x400,800x400，.)。我试了几件事： Flexbox:也很好，但是行的高度不一样。其他css框架也有与引导程序相同的

浏览 3提问于2015-01-04得票数 3

1回答

CSS / Javascript:缩放或信使式视频播放器，具有动态高度和宽度

javascript、jquery、css、html5-video

在变焦会议或信使会议中，每个参与者的视频容器动态获取高度和宽度。考虑到下面的图片，假设蓝色框是主要的容器-如果只有一个参与者，我需要给他/她(视频播放器1)的全部宽度和高度。如果有两个参与者，他们采取高度和宽度类似于pic-2，如果有三个参与者，他们采取高度和宽度类似于pic-3等等。是否有任何方法来做到这只使用css？或者说有图书馆可以这样做？我的场景：假设我是一名老师。有10名学生报名参加我的

浏览 2提问于2020-06-22得票数 2

1回答

响应式Web设计-元素之间的差距

html、css、flexbox、responsive、semantics

我正在尝试使用box-sizing: border-box;创建一个响应式的web，我知道大多数，如果不是所有的话，他们的语义标签都放在左边。在我的例子中，我划分了两个sections，一个是宽度为60%的aside，另一个是左侧浮动为40%的and。aside保持在右侧。我遇到的问题是section.upper-sec和aside.right-col之间的差距如果我在section.upper-sec和section.lower-sec之间安排asi

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

1回答

CSS Flexbox动态纵横比代码受内容影响

css、flexbox

对于网页网格布局，我决定使用Flexbox。现在我想实现一些“自动功能”，这样以后就可以插入网格框，而无需在HTML中添加类或样式。其中一个特点是使一个盒子的高度总是75%，因为它是宽的--即使这个盒子被调整了，例如，浏览器窗口的大小。当然，如果框内容扩展了75%的高度，它应该(也只有这样)增加其高度以适应内容。为了找到合适的解决方案，我找了好几个小时，但最终还是

浏览 1提问于2015-09-20得票数 0

回答已采纳

3回答

Flexbox vs Twitter Bootstrap (或类似框架)

html、css、twitter-bootstrap、flexbox

我最近发现了Flexbox，当时我正在寻找一种解决方案来使div具有相同的高度，这取决于最高的那个。我读过CSS-tricks.com上的，它让我相信flexbox是一个学习和使用起来非常强大的模块。然而，这也让我想到了一个事实，Twitter Bootstrap (和类似的框架)提供了与他们的网格系统相同的功能(当然还有很多额外的)。现在，问题是：flexbox</em

浏览 0提问于2014-12-22得票数 161

1回答

Flexbox -调整浏览器大小时div的响应高度

html、css、flexbox

我正在用Flexbox创建一个6x6平方网格。我需要的方块调整成比例大小，以适应的宽度和高度的div (主板)为较小的手机屏幕。 <div id="main-board"> &

浏览 6提问于2022-03-23得票数 1

回答已采纳

2回答

为IE9查找父div高度和向子节点添加高度

javascript、jquery、css

我在改变元素高度上有点困难。当没有flexbox可用时，html标记有类没有flexbox。下面的代码用于获取父div高度并将其添加到子节点。这将迫使IE9中的高度相等。我可能做过一些愚蠢而明显的事，但我看不见。var iconGroupHeight = $('.icon-block-group-wrapper').height; if ($('html').hasClass("no

浏览 3提问于2015-07-28得票数 0

回答已采纳

2回答

保持内容向右浮动的高度与同级div向左浮动的高度相同，以响应

javascript、jquery、html、css

因此，在调整窗口大小或在不同设备上加载页面时，右侧div中的内容应始终保持与左侧div相同的高度。此外，我还必须添加一个链接"more >>“作为响应，在右div中内容的最后一个字符结束的地方。我已经为右div使用了overflow hidden属性，并且我正在尝试使用媒体查询根据窗口宽度为右div赋予一些高度。此外，我尝试使用jquery/jscript在页面加载时检测左侧div的高度</e

浏览 0提问于2016-05-01得票数 0

4回答

如何在聚合物中创建网格视图？

polymer、bootstrap-4

我正在尝试创建一个像这样的视图的网格使用聚合物--我应该如何处理--有很多事情让我感到困惑，这将是处理这种设计的最好方法--不管是用聚合物还是任何网络组件，这样就可以定制它，以及我应该如何使用它，任何链接或参考都会有很大的帮助

浏览 6提问于2017-08-31得票数 0

回答已采纳

2回答

删除CSS网格中的"Align-items“空间

html、css、css-grid

我正在尝试使用CSS Grid作为2d替代方案来填充我正在创建的一个小型测试博客的空间。我遇到了一个关于定位的小问题。但是，我希望视图看起来像这样：目前，我的代码结构如下：.articles { display: grid;然而，第三段停留在其当前的静态位置，而不是移

浏览 2提问于2017-08-16得票数 2

1回答

safari中的CSS网格和高度100%

css、safari、height

所以我有一个用CSS grid做的网格，我有一个iframe，它接受它所在的网格单元的100%，所以父div，正如我在其他帖子safari和其他浏览器上读到的那样，不支持这个height: 100%没有一个具有设置高度value的父元素，我正在寻找如何让它在这些浏览器上工作，以及如何在我的代码中实现它。我很快就读到了一些叫做@support的东西，但我真的不知道如

浏览 2提问于2017-10-17得票数 1

点击加载更多