Flexbox不包含整个图像(CSS)

文章/答案/技术大牛

发布

2回答

javascript、html、css、flexbox、slider

我正在使用我自己的滑块脚本制作一个具有flexbox属性的图像胶片。问题是，当我检查.film目录时，它并没有像这样正确地包含整个图像： ? 如您所见，这些图像属于.film目录。然而，它只包含图像的一小部分。我想要的.film分区涵盖所有的图像。有什么办法可以解决这个问题吗？

浏览 16提问于2019-04-23得票数 0

1回答

将图像缩放到挠曲箱中的最大尺寸

html、css、flexbox

一个柔性盒项要么包含一个或多个<p>元素，要么包含单个<img />。带有图像的柔性盒项应该是完全填充图像的，而不是设置为起伏div.The图像的背景，即使图像填充了整个宽度，div.The图像的下方总是有一个小的红色条。如何使图像填充整个柔性盒项？如果图像的高宽比发生变化，这并不重要。，我不希望图像下面的空白空间消失。我想要它

浏览 0提问于2015-10-11得票数 0

2回答

如何使我的加载图像居中显示在我的页面上？

css、jsf-2、richfaces

我想在等待ajax响应时(单击菜单项时)在页面上放置一个加载掩码，所以我将加载图像添加到定义菜单项的模板中： <!templates/main-template.xhtml"> <link rel="stylesheet" type="text/css" media="all" href="${reques

浏览 20提问于2018-12-27得票数 0

1回答

Flexbox <p>元素在页面上重叠图像调整大小

html、css、flexbox

当我调整页面大小时，右栏中的文本与左栏中的图像重叠，如下所示： ? 如何停止此操作，并在调整页面大小时使右侧列保持在原来的位置，或转到图像下方？@import url(https://fonts.googleapis.com/css?

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

回答已采纳

4回答

火狐挠曲盒图像宽度

html、css、firefox、flexbox

我有一些困难，使我的形象，以不超过100%的可用宽度的父容器。我只注意到Firefox 36中的问题(不包括IE或Chrome)。那么是firefox的bug还是我在这里遗漏了什么呢？注意:图像不应该比原来的尺寸大。 Firefox：<html> <style type="text/css"> width:300px;.flexbo

浏览 5提问于2015-02-25得票数 13

回答已采纳

3回答

如果您在网页的CSS样式表中使用FlexBox命令，这将是一个解决问题。所有现代浏览器都支持FlexBox。然而，使用Angular2构建一个web应用程序，我无法应用最简单的FlexBox命令！页脚不粘在底部！这是我的。在柱塞应用程序中，style.css包含一个非常简单的Flexbox命令，它可以工作--只需将index.html的内容替换为index1.html，并查看粘性页脚在没有角度存在的情况下是如何工作的。对于Angular2应用程序，我

浏览 2提问于2017-01-25得票数 3

回答已采纳

2回答

使用带有引导的css在所有列中等高

html、css、twitter-bootstrap

在div (行)中应用下面的css，即使在应用下面的css之后，当我在第三列中有5列时，当我在整个页脚中输入更多的数据时，第一列和第二列没有增加，这是没用的。 display: -webkit-box; display: -ms-flexbox

浏览 3提问于2016-03-06得票数 0

1回答

如何调整图像大小以适应flexbox，并包含1fr网格中的所有内容？

html、css、flexbox、css-grid

我正在尝试创建一个有1fr的网格，里面包含了弹性框和网格。但是对于较小的屏幕尺寸，.container网格减小的大小与我预期的不同(使用mediaquery)。flexbox (portfolio-main-card)用于包含图像和文本，图像和文本分别具有flex:1和flex:2。但这张图片远远超出了flexbox的flex:1 .The html部分： <div class="portfolio-main-card"> <div clas

浏览 8提问于2020-09-30得票数 1

回答已采纳

1回答

三个div /两列布局-可能与Flexbox？

css、layout、flexbox

我一直在尝试使用flexbox实现下面的布局。我最初有一个包含图像和导航的左手边栏，以及一个主要的内容区域。在移动平台上，侧边栏用于在主内容下面包装。问题在于，我需要将图像保持在移动设备的顶部，所以我一直在尝试在一个包装器div中使用三个兄弟级div。

浏览 4提问于2021-11-06得票数 2

回答已采纳

2回答

为什么我在Safari和Chrome中有不同的行为？

html、css、flexbox

我正在显示一排图像。src="img1.jpg"/> <img src="img3.jpg"/></div> display: flex height: auto;我要把我的图像一排排地显示出来。对

浏览 1提问于2016-04-15得票数 5

回答已采纳

1回答

使用html和css创建卡片产品

html、css

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

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

回答已采纳

2回答

如何使用CSS实现“击倒”效果？

html、css

(请忽略坏的，1分钟响应bg图像的实现！)这个实现也不使用任何CSS3，所以我可以想象在兼容性方面不会有太多问题。请看附图(不，这实际上不是我正在做的:)只是一个例子！这张照片是一张全宽响应的照片.标题是全宽度的，但其内容位于响应网格上，该网格不超过某些任意大小(由黑线显示)，但可以缩小。

浏览 10提问于2012-07-04得票数 8

1回答

具有Flexbox的等高图像

html、css、flexbox

每本书都是一个单独的块，其中包含一个标题(书名)和书封面的图像。我希望所有的图像都是相同的高度，填充整个街区，但这似乎不适合我。为什么图像一开始就有不同的高度，即使我将100%的高度传递给容器内的图像元素？我怎么才能解决这个问题？在中可以看到完整的HTML/CSS<div class="flexbox"> &

浏览 3提问于2019-10-25得票数 1

2回答

如何在webpack.config.dev.js文件中添加React FlexBox-Grid加载程序？

javascript、reactjs、webpack、create-react-app、react-flexbox-grid

postcss' 安装的React FlexBox-网格使用以下npm命令安装了以下依赖项它的接缝反应-FlexBox-网格不是由网络包加载器选择的。我在这里的问题是如何向现有的css加载程序配置中添加React FlexBox-Grid。从React FlexBox-Grid文档中，建议了两个设置，我不知道如何

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

回答已采纳

1回答

CSS图像和标题-高度100%在一起

html、css

我有这样一种情况，一个图像需要在下面显示一个标题(而不是重叠)。图像的大小和字幕的长度都是未知的。整个figure元素的高度需要为100%，如下所示：元素的宽度应该是动态的，由图像比例决定，标题应该相应地换行。这一点很重要，因为我需要一个接一个地显示几个图像。有没有办法只用CSS就能做到呢？display: table 还有flexbox，它也有自己的

浏览 0提问于2016-08-10得票数 6

1回答

无法并排排列元素

html、css

我试过flexbox，让它们浮动，放入UL，但都不起作用……My + CSS：Tablename =imglink 列= id

浏览 0提问于2016-11-09得票数 0

1回答

bootstrap 4-何时使用重启css和网格css？

twitter-bootstrap、twitter-bootstrap-3、twitter-bootstrap-4

当我使用NuGet将Bootstrap v4.0.0-alpha.6下载到我的项目中时，除了bootstrap.css之外，我还看到了bootstrap-reboot.css和bootstrap-grid.css这两个css文件有什么用？我真的需要在我的项目中包含它们吗？

浏览 0提问于2017-03-16得票数 51

回答已采纳

2回答

如何将嵌套的flexboxes与Angular组件一起使用？

html、css、angular、flexbox

感谢"how to make nested work“这篇文章中的，我知道使用以下基本的HTML和CSS可以达到预期的效果：<div id="flexbox-outer"> <div id="flexbox-inner"> </div> </div&g

浏览 15提问于2019-11-05得票数 1

回答已采纳

1回答

当表格尺寸变小时，切断表格背景的底部

css

我确信这应该可以通过CSS来实现，但是还没有找到解决方案。到目前为止，我对扩展问题没有任何问题，但是我还没有找到缩小表高度的解决方案。

浏览 1提问于2015-05-16得票数 0

1回答

CSS flexbox、overflow: scroll和z-index的问题

html、css、internet-explorer、z-index、flexbox

我正在尝试使用HTML/CSS实现一个windows8应用程序，其中包含两个灵活的文章布局(一个在y轴上，另一个在y轴上)，这两个布局都设置为overflow-x: scroll。但是，通过使用文章的z-index属性，我希望文章的展开视图覆盖整个屏幕，覆盖另一个flexbox容器。然而，它并不起作用。我不认为这是IE10/Win8独有的，我认为这是我的CSS的一个问题，因为它不能在带有webkit flexbox属性的jsFiddle中工作。有关示例，请参阅此。正

浏览 0提问于2012-07-03得票数 0

点击加载更多