CSS Flexbox -按卡片描述对齐

文章/答案/技术大牛

发布

1回答

css、flexbox

我有一个简单的卡片布局，我想通过卡片描述来对齐它。有人能帮帮我吗？:) ?

浏览 30提问于2018-12-26得票数 0

回答已采纳

2回答

所以基本上，我只用HTML和CSS做了一个非常简单的网站。我有这3张卡片，它们都有自己的<a>父元素，因为我希望无论你在卡片的什么地方点击它们，它们都是可点击的。然后，所有这些元素都包装在一个名为cards的div标记中在添加元素上的锚标签之前，我只在CSS文件中的cards类上使用flexbox将所有卡片居中。到目前为止，所有的卡片都在同一条线上，并且都完美地居中。现在，在将每张卡片包装在单独的锚标签中之后，我对该div中的所有锚元素应

浏览 22提问于2020-07-27得票数 3

回答已采纳

2回答

Vanilla JavaScript切换函数将我的h2标签上移

javascript、html、css

document.addEventListener("click", toggleContent, true); .contents { display: -ms-flexbox

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

回答已采纳

3回答

具有相同高度的嵌套项目的嵌套flexbox

css、flexbox

我正在尝试实现一个卡片模式(类似于)，利用flexbox进行布局。每个卡片都有一个标题和一个内容，并使用flexbox对它们进行排列。卡片的高度已经一致，这要归功于外部的flexbox。我不知道如何使标题的高度一致。div> <div class="flex-cont

浏览 2提问于2016-05-10得票数 1

1回答

使用html和css创建卡片产品

html、css

我正在尝试复制一个与图像中的相同的卡片产品，但我仍然找不到右侧的名称，尽管是绝对的，但始终以图像作为参考。 ? 有没有人能给我指点一下，谢谢！

浏览 32提问于2020-05-03得票数 0

回答已采纳

1回答

其他div的多行文本更改位置

html、css

我试图修复div旁边包含多行文本的div位置。当entry-bot类只有一行文本时，一切看起来都很完美。不幸的是，我尝试过与overflow和text-wrap玩，但没有成功。最终效果应该如下所示：

浏览 4提问于2013-08-06得票数 1

回答已采纳

1回答

用于响应式设计的物料单选按钮组中的物料卡片

css、angular、responsive-design、angular-material

我尝试过Bootstrap，Angular Flex Layout，不错的旧CSS，但都失败了。问题是材料卡本身，只要它们不是单选按钮的一部分，我就能保持它们的大小不变。所以请帮帮忙。

浏览 40提问于2021-07-02得票数 0

3回答

响应式导航按钮

html、button、responsive-design

Testimonials</a> </div>CSS

浏览 4提问于2018-05-14得票数 0

1回答

如何对齐反应引导卡

css、reactjs、react-bootstrap

我有不同的图片和文本的卡片，使它们更大/更小，我找不到任何反应-- Bootstrap的具体答案，但是我尝试过的每个css和普通Bootstrap选项都失败了。唯一在这个问题上放置补丁的是在卡片中设置一个最大的高度，但是那些具有较大图像或文本的卡片的图像更高或更低，对于一些中等大小的图像和一个较大的图像的行来说确实很糟糕。例如：我试着修改了这个答案的前三个答案：，但是它不起作用，例如使用d-flex对齐项-拉伸 import React from "react";

浏览 8提问于2022-02-02得票数 0

1回答

仅使用flexbox CSS将flex项像网格一样对齐

css、flexbox

我正在尝试在flexbox中左对齐项目，如下所示。然而，我不能让它们像网格显示那样对齐，我尝试了所有的flexbox属性，但只能使用网格才能使其工作，但我不能在这里使用网格。 ? 下面是我的代码： CSS .container { align-items: center; text-align:left; } 我需要所有的文本左对齐红线。

浏览 14提问于2020-10-19得票数 2

回答已采纳

2回答

如何根据CSS中元素的数量改变元素的排列方式？

html、css、flexbox、css-grid

我有一个这样的CSS。我想根据卡片的元素数量动态地将卡片的位置更改为居中或右对齐：.section { flex-wrap: wrap; <div class="card"></div> <div class="card

浏览 32提问于2019-11-15得票数 3

2回答

在cols中引导相同高度的卡

css、twitter-bootstrap、twitter-bootstrap-3、flexbox

div> border: 1px solid #ddd; padding: 20px;由于虚拟文本的长度不同，因此卡片的高度也不同我在这里找到了使用flexbox的一个技巧：，但它将在.row的直接子对象上工作，而不是在.card上另一件事，即使卡片的高度相同，按钮也不会在同一行上，因为它们将跟随文本。

浏览 3提问于2016-07-15得票数 0

1回答

在Vaadin v.23中，按钮对齐不起作用

button、alignment、vaadin

另外，我所有的按钮都是80 my，前两个看起来是垂直对齐的，而第三个看起来更高。我如何将它们垂直对齐？

浏览 7提问于2022-10-29得票数 2

回答已采纳

1回答

Float: right属性在flexbox中不起作用

html、css、flexbox

所以我在我的网页中使用了一个flexbox，我有两个元素。我希望第一个元素居中对齐，第二个元素向右对齐。我可以用flexbox属性将它们对齐到中心，但是我不能将第二个属性对齐到左边。</span>Css：display: flex;justify-content: center;}

浏览 2提问于2021-06-07得票数 0

1回答

CSS挠性盒图像对中

css、html、flexbox

我有一个可变的图像集，我显示在一个柔性盒，并试图确保图像垂直和水平对齐他们的父div。我已经尝试了通常的垂直对齐，文本对齐，最大宽度: 100%；和边距:0自动；。有什么好的跨浏览器解决方案，以解决我的困境，不会导致扭曲/左对齐图像？下面是CSS (在它当前的borky表单中，我也尝试过前面提到的以CSS为中心的CSS)： max-width: 100%;

浏览 1提问于2014-05-25得票数 0

回答已采纳

3回答

IE11中的弹性框对齐

css、internet-explorer、flexbox

在附加的Codepen中，您将看到我正在使用Flexbox来对齐标题中的徽标和菜单图标。徽标应该左对齐，菜单图标应该右对齐。(我还有其他元素，但这只是一个用于演示的简化版本)。在IE11中测试时，我发现Flexbox无法正常工作。据我所知，通过文档，IE11应该支持这一点。我还有其他的Flexbox元素，它们也不能工作。.container { display

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

回答已采纳

1回答