Img在flex容器中占用了额外的空间？
在flex容器中，Img元素默认是一个可替换元素，它的宽度和高度由其内容决定。当Img元素设置了具体的宽度和高度时，它会按照这些尺寸进行显示，不会占用额外的空间。
然而，如果Img元素没有设置具体的宽度和高度，而是根据其原始图片的尺寸进行显示，那么它会占用额外的空间。这是因为在flex容器中，元素的宽度由其内容决定，而Img元素的内容是其原始图片，所以它会根据图片的尺寸来确定自己的宽度，从而占用相应的空间。
为了解决这个问题，可以给Img元素设置一个固定的宽度和高度，或者使用CSS的object-fit属性来控制图片的显示方式。另外，也可以将Img元素放在一个容器中，并给容器设置固定的宽度和高度，这样Img元素就不会占用额外的空间了。
推荐的腾讯云相关产品：腾讯云对象存储（COS） 产品介绍链接地址：https://cloud.tencent.com/product/cos
相关·内容
1回答
是否有一种方法可以在柔性盒中有相同的高度项，并将容器内的所有内容与底部对齐？
目前这是我的
.quick-menu .menu {
font-size: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.quick-menu .menu .item {
margin-top: 30px;
width: 33.33%;
align-self: flex-end;
}
.quick-menu .menu .item > img {
margin: auto;
}
.q
浏览 1提问于2016-11-15得票数 1
回答已采纳
1回答
我试图实现一个与屏幕高度成比例的标题，并包含一个带有标题的图像。尝试的解决方案使用了行flex布局。其意图是让标题占视口/父级高度的比例(20%)。图像的宽度和其父图像的宽度应该根据图像的纵横比匹配缩放的图像宽度。标题的父div应该占用剩余的宽度并增长以填充任何可用的水平空间。
集装箱采用高度成比例的固定定位。
Chrome 54和Firefox 50中的实际行为是，图像的父元素占据容器宽度的大部分，这个宽度是由图像的实际宽度(而不是图像的缩放宽度)决定的。当图像缩小到那个宽度的一小部分时，我不明白这一点。
这里再现此行为的示例：
HTML：
<div class="contai
浏览 1提问于2016-11-21得票数 3
我正在努力更好地理解弹性框css，并有一个所有页面的主要布局。它是3列，其中第一列是固定宽度，其他可以是任何大小，只要所有3占100%的宽度。
我相信问题在.col类中，但不确定如何设置第一列，让另一列增长。谢谢。
.wrapper {
display: flex;
flex-direction: row;
}
.col {
flex-basis: 25%;
align-items: stretch;
}
<div class="wrapper">
<div class="col">1</div>
浏览 0提问于2018-01-28得票数 4
回答已采纳
2回答
在下面的场景中，如果单词超过了方框的宽度，我需要将整个单词推入新行。我使用了CSS3 字包装属性来实现这一点。但它打破了这个词，如下所示。
如果文本更多的话，我不想打断一个词，把整个单词推到下一行。
<div class="container">
<div class="img-container">
<img class="img-icon" src="/icons/image1.png">
</div>
<p cla
浏览 4提问于2017-03-02得票数 1
使用角质材料的挠曲盒，我很难得到带边距和边框的div来对齐。
我想要一排，每一行3盒，占水平空间的1/3，然后是2盒，第一排占1/3，第二排占2/3。这很好，如果我没有空白处周围的框，但与空白，它打破了。
我怎么才能解决这个问题？
HTML：
<body layout="column" ng-app="myApp" ng-cloak>
Borders of divs with margins don't line up
<div class="with-margins">
<div lay
浏览 1提问于2016-04-13得票数 1
回答已采纳
1回答
我在flex中有一个图片，它在边缘浏览器中延伸，但在其他浏览器中是正常的。这是我的密码和花招。打开彩色和边缘的jsfiddle url ..。我想让它看起来像边缘的铬。
.logo {
height: 100px;
display: -webkit-flex;
display: flex;
-webkit-align-self: center;
align-self: center;
width: 200px;
background: red;
}
.logo img {
width: auto;
height: auto;
margin: auto
浏览 1提问于2016-10-26得票数 1
回答已采纳
3回答
我有一个占窗口空间60%的<div>，它包含两件事：
窄头线
一张图像，我想取下div的其余部分。
我如何使用纯CSS (没有Javascript)来做到这一点？我试过很多东西，没有运气。
这是我能得到的最接近的图像；该图像在div.container的绿色边框外隐匿。
html, body {
height: 100%;
overflow: hidden;
margin: 0px;
}
div.container {
height: 60%;
border: 2px solid green;
box-sizing: border-box
浏览 4提问于2020-02-14得票数 1
回答已采纳
1回答
关于柔性盒，我有一个复杂的问题。基本上，我的演示在Chrome中工作，但在Firefox中不起作用。下面是我的HTML代码：
<div class="flex-main-container">
<img src="http://www.modifiedstreetcars.com/sites/default/files/styles/carousel_circle/public/Nissan-GTR-White-Custom1.jpg?itok=RTxhTPOv" alt="">
<img src=
浏览 4提问于2016-08-21得票数 2
2回答
我正在添加一个图像和许多文本输入(FloatLabelTextInput)到一个反应本地应用程序的<View>。到目前为止，我还没有在y轴上用flex属性平均地间隔图像和文本输入。由于图像显示的高度太小，剩余的FloatLabelTextInput在y轴上占用了太多的高度。
我已经测试并模拟了该应用程序在“世博反应”中的视图--本机沙箱在这里使用了我使用的相同的CSS：
1图像截断和文本输入占用过多的高度：
2图像显示正确，但ext输入占用了太多的高度：
我也尝试过将flex属性设置为整个flex的一部分，但这并不会调整视图中元素间距的宽度或高度。
问题：
如何使用
浏览 1提问于2017-12-30得票数 2
回答已采纳
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background: url("assets/images/bg.jpg")no-repeat top;
background-size: cover;
background-attachment: fixed;
}
.category-container {
width: 87%;
margin: 3em auto;
}
.category-container h2 {
margin: 0 auto;
backgroun
浏览 0提问于2018-11-05得票数 3
我在下面的片段里有个滑块。如果您运行它，您会注意到当您导航滑块，内容进入滑块下方，然后进入滑块容器。
如何解决这个问题，这样它就可以在不破坏内容的情况下向左和右滑动？
class Slider {
constructor(sliderElem) {
this.slider = sliderElem;
this.sliderItems = sliderElem.getElementsByClassName("testimonial__item");
this.nextBtn = sliderElem.querySelector(
浏览 2提问于2021-09-02得票数 0
2回答
我不确定是否允许这样做，但我的问题实际上可以分为两部分：
底部标题应该显示一个底部框阴影，但不是因为背景和z索引(如果我是正确的)。
container应占剩余可用屏幕高度的100%。如果container right中的内容较长，请同时扩展container和container right。container left应该始终保持100%的可用高度，停留在屏幕上，如果内容对容器太长，则显示滚动条。
正如您在下面的情况中所看到的，目前我也无法做到这一点。
我如何解决这两个问题？我一直在尝试各种不同的解决方案，但它们似乎都没有100%的效果。
请注意，有一个特定的分层顺序：
容
浏览 0提问于2018-02-13得票数 0
我是HTML和CSS的新手，我遇到了一个关于我正在编码的菜单的问题。
我想用嵌套的flexbox制作菜单。它离我想要的越来越近了，但由于我不能理解的原因，儿童flexbox中的justify-content似乎不适用……
下面是我的代码：
header {
display: inline-flex;
height: 90px;
align-items: center;
justify-content: flex-start;
}
.avatar {
display: inline-flex;
height: inherit;
width: 200px;
ba
浏览 5提问于2016-03-24得票数 7
1回答
我第一次尝试CSS3 3的柔性盒，它看起来很有希望，但我有一些困难，让它的行为。
基本上，我希望flexbox的行为像一个表，但是使用order属性，这样我就可以在CSS中告诉它显示网格中元素的顺序。这在柔性盒中可能吗？
下面是我创建的测试页面：
HTML：
<div id="main">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div>generic</div>
<div
浏览 1提问于2015-10-02得票数 2
回答已采纳
1回答
使用柔性盒，如何使<p>与其父端对齐？
根据文档，向父元素添加align-content: flex-end就足够了。但是，在下面的示例中，这是行不通的。
示例：
下面是一个包含p元素的简单div。
div {
display: flex;
flex-direction: column;
align-content: flex-end; /* This should do the alignment, but doesn't. */
background: yellow;
padding: 50px;
height: 300px;
width
浏览 6提问于2016-09-28得票数 2
回答已采纳
1回答
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
.container {
width: 100%;
height: 200px;
display: flex;
}
.box1 {
width: 25%;
min-width: 400px;
height: 100%;
}
.box2 {
width: 75%;
heig
浏览 0提问于2018-09-25得票数 2
回答已采纳
1回答
我正在尝试设置一个带有的菜单栏
我正在用FlexBox做这个尝试，但我不知道出了什么问题。下面是HTML：
<nav>
<ul>
<li id="navleft">
<img src="images/logo.png" alt="logo wikihow">
</li>
<li class="navothers">
<
浏览 3提问于2017-11-30得票数 0
回答已采纳
1回答
当我在其中包含一个display flex布局时，我的显示网格布局遇到了问题。 在我的第一个例子中，我有我想要的网格布局。它分为5列，页眉占100%，页脚占100%，它们之间有一个过滤器元素占20%，一个项目元素占60%，另一个旁注元素占20%。这很好用。 但是，在我的秒级示例中，我在items网格中添加了一个flex项。当我这样做时，filter和aside元素不再保留预期的20%，而items元素变得更大。看起来像是显示flex覆盖了显示网格。我假设这是因为显示网格和显示flex元素都从正常的文档流中去掉了。 所以我的问题是，如何在不丢失网格的预期布局的情况下，将display flex
浏览 11提问于2019-03-12得票数 0
回答已采纳
我有一个模块.m-standout，它使用display:flex，由标题、子文本和图像组成。基本上，我想使用flex定位标题和子文本，然后让图像占100%的宽度以下，但目前的图像占第三列。有人能告诉我如何防止图像使用flex吗?我在没有joy的情况下尝试了flex:0和flex:none之类的东西。
CSS
.m-standout {
display: flex;
.standout-heading {
font-size: 34px;
width: 31.28834%;
align-self: center;
}
浏览 0提问于2014-09-02得票数 2
回答已采纳
1回答
我正在练习CSS/flexbox复制instagram的登录页面，但是我面临着水平对齐的问题，我不知道出了什么问题。
一个大包装内有两个主要容器(“instagram- wrapper”--每个容器的宽度是包装器的50% )。
集装箱1(左)：只包含手机img的“手机-img”
容器2(右)：包含所有登录输入、订阅等的“帐户-信息容器”。
左边的图像按预期工作，但我想要做的是将帐户信息容器中的所有内容与正确的内容对齐，本质上是将图像和登录容器并排放置，但它不起作用。我遗漏了什么？(我打赌这是件简单的事情.)
提前谢谢。
PS:我还没有对反应能力进行研究。
/* Genera
浏览 1提问于2022-06-25得票数 0
回答已采纳
1回答
我有一个非常简单的标记和css，但出于某种原因，我似乎无法用柔性盒来对div进行中心设置。(水平和垂直)
我经历了许多问题/答案--但我找不到罪魁祸首。
一切都非常简单，容器，两个div：
<div id="content">
<div class="logo-box box">
<img alt="logo" src="http://placehold.it/222x320?text=logo">
</div>
浏览 4提问于2017-01-28得票数 1
回答已采纳
在这支笔/小提琴中，我为演示目的创建了一个非常非常简单的页面布局：
在浅蓝色的"content"-area中，我有一个带有类flex-container的div，它包含一个标题和一个div嵌套的图像。
<div class="content">
<div class="flex-container">
<h1>Nice Image</h1>
<div>
<img src="http://loremflickr.com/800/
浏览 1提问于2017-09-06得票数 3
回答已采纳
1回答
如何将子宽度限制在垂直挠曲盒中的内容上？从青色背景中可以看到，子宽度占据容器的宽度。我希望它只占它所需要的宽度。
.container{
display: flex;
background: yellow;
flex-direction: column;
padding: 5px;
}
.content{
background: cyan;
margin: 5px;
}
<div class="container">
<div class="content">hello whats up</div&
浏览 1提问于2016-08-02得票数 1
回答已采纳
2回答
如何调整空格周围的间距？
、、、
我有点迷惑了:我试图在3div(水平方向)之间创建40px的空间，但这样做似乎不起作用：
我希望黄色标记的部分是40px：
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 6
浏览 0提问于2018-03-31得票数 0
1回答
在弹性方向上垂直居中:柱
、、、
我尝试使用Flexbox将页面左侧的元素垂直居中，但一直无法实现。它们是通过flex-direction: column组织的，我不确定在设置此选项时如何水平居中。到目前为止，我的代码和我的网站的实时版本见下文。我将两个flex容器分成了向右和向左，这样我就可以分别处理它们并居中了。目前，我只处理左边的问题。因此，我将首先展示它的CSS。 我尝试过align-items、justify-content和align-self，但这些都不起作用。 谢谢，提前！ 直播网站：https://huddle-single-landing-page.jordanchude.now.sh/ HTML <
浏览 14提问于2020-04-14得票数 0
回答已采纳
1回答
引导拉-右加额外的空间
、、、
我在一个位于容器div内的div上使用了右拉，但是对于一些人来说，当我在div上使用拉右时，它会使div更宽，这样它就不会与页面的右侧平齐。我用Chrome来检查这个元素，但是我不知道这个额外的宽度是从哪里来的。这不是衬垫或边缘的集装箱似乎只是更宽？
问题可以在页面顶部看到，所有的社交媒体图标都在上面。
<div class="container">
<div class="pull-right">
<a><img/></a>
...
</div>
<
浏览 6提问于2013-12-08得票数 5
1回答
我对学习CSS和flex非常陌生，我在使用一些flex容器时遇到了一些困难。我将把我的代码放在下面，但本质上是: flex容器的子元素是div，每个元素都包含一个带有字幕的图像。这些div本身也是灵活的元素。图像之间加载适当的间隔，但字幕部分或全部被其他图像覆盖，就好像它们的尺寸被忽略了一样(尽管它们是图像所在的同一个flex容器的一部分)。我觉得可能有一个简单的解决办法，但我无法在我的生活中找到答案。
这一切让我得到的是：
.subtitle {
font-family: Helvetica;
color: seashell;
font-weight: bold;
浏览 7提问于2022-07-07得票数 0
回答已采纳
尝试让我的弹性项目在.sec-3 div中同等地占据div。我给出了两个弹性项-- flex:1;，这意味着flex-basis和flex-grow:应该是1，收缩0？
我也尝试过使用justify-content:space-between，因为它还没有
起作用了？不知道为什么？
有什么想法吗？
Html
<div class="sec-3">
<!-- iphone image -->
<div class="sec-3-flex">
<!--
浏览 1提问于2017-07-14得票数 1
回答已采纳
1回答
iPad上的挠性柱折叠
、、、
这个问题以前已经提过很多次了，但是flex模型已经发生了很大的变化，我仍然无法找到一个可行的解决方案。
问题
当对象的flex方向设置为列时，所有对象的高度都会折叠(即高度:0)。
问题似乎仅限于iProducts。据我所知，Flex在桌面和android的所有浏览器上都能正常工作。
这个问题并不局限于Safari，因为在iPad上测试时，Chrome和Firefox上都存在这个问题(IOS 10.3.3)。
这个例子说明了这个问题。当宽度小于600 to时，行切换到列，就会出现问题。
.InputRow,
.InputItem,
.InputWrap {
disp
浏览 0提问于2017-09-14得票数 1
2回答
我正在使用flexbox在页面上居中项目，也在一行中居中项目。我必须处理行中可能很大的图像，所以我使用max-width=40%来缩小图像的大小。但是，当我这样做时，适用行的flexbox不会缩小以适应新的图像大小，但会保留该大小，就好像图像仍然是max-width=100%一样。如何使flexbox行更小，以说明40%的最大宽度属性？ 下面是当前的html代码： <div style="display: flex; flex-direction: column; align-items: center;">
<label>This is my
浏览 19提问于2020-12-28得票数 0
我有一个具有flexbox的父元素，在该元素中有一个带有max-height和max-width的图像。这在Chrome中显示得很好，但是在火狐上，图像是用height:100%和width:100%显示的，而在IE中则是用width way在100%上显示的。
我在上创建了一个示例。
HTML：
<div id='flex'>
<img src='https://www.google.se/images/srpr/logo11w.png' />
</div>
CSS：
#flex {
align-items: cen
浏览 2提问于2013-11-07得票数 7
回答已采纳
1回答
因此，我一直试图在vuetify中创建一个具有特定布局的V-Card。卡的顶部将在大小上变化，因此我需要能够将卡的底部对齐到底部。 所以我试着在这里做下面的代码，它应该允许第一部分“增长”以填充高度，然后第二部分“收缩”并停留在底部… 然而，没有成功..我可能只是做错了什么，但我正在拔掉我的头发... 下面是我的代码： <v-card shaped color="white" height="100%" width="100%">
<v-container fluid>
<v-layout column>
浏览 22提问于2020-04-22得票数 0
回答已采纳
1回答
我正在尝试创建一个具有以下行为的响应页面：
我需要两个<a>标签，一个在另一个旁边。这些标记在<i>标记中有一个图标，而<span>标记中有一些文本。
由于视口的宽度减小，我希望图标保持相同的大小，但在将第二个<a>推到下一行之前，我希望文本尽可能多地包装。这张图片依次显示了我想要发生的事情：
和我一样近。我想要的功能是存在的，但是我必须在flex-basis: 100px和flex-grow: 1中设置.outer-item才能使其工作，这会产生不良的效果，使两个项目的宽度相同，并将它们扩展到可用的空间中。
.outer-wrap
浏览 4提问于2016-11-02得票数 1
回答已采纳
1回答
不幸的是，我不得不使我的网站代码与Internet Explorer 10兼容，即使在阅读了他们官方网站上的文档后，我也遇到了一些问题
下面是我的css代码：
.uberflex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
display: -webkit-flex;
-webkit-flex-flow: column wrap;
-webkit-ju
浏览 2提问于2013-09-10得票数 13
回答已采纳
1回答
我有以下html：
<div class="inhaler__animation__container">
<div class="inhaler__image__wrapper">
<img src="img/inhaler-only.png" alt="Inhaler animation image" title="Inhaler animation image">
<div class="inhaler__image__
浏览 0提问于2018-07-10得票数 1
回答已采纳
1回答
我正在尝试使用柔性盒模型来设计布局。在我的布局中，右边有一个固定宽度的边栏，左边有一个灵活的宽度内容。左边的内容是项目列表(基本上是ul - li结构)。
左边的内容(ul - li结构)是使用柔性盒布局使其灵活。因此，当我调整浏览器窗口的大小时，列表项的间隔是均匀的，这是所需的行为。
问题是，右边的固定宽度边栏不具有相同的左间距(边距)，比如列表项目之间的主内容。
这是我的代码：
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>&l
浏览 3提问于2014-07-30得票数 1
回答已采纳
关于flexbox，有一个我既理解又不理解的特性：
如果我要声明以下内容：
#container {
display: flex;
border: 1px solid gray;
flex-direction: column;
}
.one {
height: 100px;
width: 100px;
background-color: red;
display: block;
}
.two {
height: 100px;
width: 100px;
background-color: green;
display: block;
}
&l
浏览 0提问于2019-08-07得票数 0
2回答
我有以下模板：
<div id="row">
<div id="longer"></div>
<div id="shorter"></div>
</div>
当它们位于同一行时，我希望longer的宽度是shorter的两倍，因此我应用了以下CSS：
#row {
display: flex;
flex-wrap: wrap;
}
#longer {
flex: 1 0;
}
#shorter {
flex: 0.5 0;
}
这看起来很好，但是当
浏览 0提问于2019-02-13得票数 2
回答已采纳
我试图使用flex CSS属性将一组元素放入一个整洁的小框中。
这看起来正是我想要的IE10，但Chrome显示它是非常不同的。我基本上有：
集装箱
复选框(flex:5)，应该足够宽，以显示D，但不太宽。
文本输入(flex:10)，应占用所包含内容宽度的一半多一点。
确认按钮(flex:6)，应该足够宽，以包含其文本，但不多。
它在IE中运行得很好，但在Chrome中，前两个元素占据了每个元素宽度的50%，使得确认按钮从末尾掉下来。
我的Flex逻辑是错的，还是Chrome搞砸了？
浏览 5提问于2013-04-10得票数 2
2回答
删除我的容器中创建的空间
、、、、
我有一个容器，它有一个图像，在图像的顶部有一个按钮，但是在容器内部，在右边创建了一些“额外的”空间。我需要删除这个额外的空间，因为它占用了太多的空间。3个水平图像居中对齐，所有这些图像都使用flex显示。使用引导。
没有宽度或高度的大小，它只是这个按钮后面的图像。
<br>
<h1 class="text-center">¿Qué temas te interesan?</h1>
<div class="row justify-content-around">
浏览 0提问于2019-07-02得票数 0
1回答
在flexbox布局中，fr(分数)单元的最佳类比是什么？我在想flex: 1，但不确定就其增长/收缩行为而言，它是否是最佳匹配。 我想做的是对网格布局做一个后备，这样它就可以在IE11中工作了。我有一个网格语句grid-template-columns: 11.25rem 1fr;，它不能在IE中工作(即使使用自动前缀添加-ms-grid-columns列，它仍然堆叠在一起)。 所以我在想，也许可以在IE的flexbox中实现它，使用如下所示： .container {
max-width: 46rem;
.parent {
display: flex;
&am
浏览 12提问于2020-06-09得票数 5
回答已采纳
我在一个挠性盒子里有个按钮。我想占用尽可能多的空间，但我也希望这个柔性盒有一个分钟的高度，因为在你点击这个按钮后，它将被动态文本所取代。如果这个动态文本真的很长，我想要弯曲框，使其在高度上增长，这样所有的文本都适合。
以下是我尝试过的：
<div class="container">
<button disabled="" tabindex="0"> Text </button>
</div>
.container {
display: flex;
flex-directi
浏览 2提问于2020-06-17得票数 0
回答已采纳
我有一个指向jsFiddle的链接，它将显示问题。基本上，问题出在中间的容器(sector2蓝色容器)，它在列方向上是灵活的，并且有5个flex子元素。其中四个元素是大小为150x150px的图像。我已经将image-wrapper (每个子元素的类)赋给了flex: 1，这意味着蓝色容器应该被分成5个等高的部分。现在我设置了每个图像的min-height: 100%，这使得图像的高度与一个部分(子元素)的高度一样多。 当我想要保持图像的纵横比并设置object-fit: scale-down时，问题就出现了。此属性使图像保留纵横比，但容器(image-wrapper)和蓝色容器(secto
浏览 11提问于2019-05-29得票数 0
1回答
我有以下布局：
export const NewsLetterContainer = styled.div`
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: absolute;
background-color: white;
top: 64px;
padding: 64px 64px 64px 64px;
width: 808px;
height: 360px;
@media ${query({ from: 'xs', to: 'sm' })}
浏览 2提问于2022-02-17得票数 1
回答已采纳
我在建一个网站。
我可以让面板达到网站的全部高度。(顶部面板占页面的50%，底部占页面的50% )
我试过的是：
展示: Flex
身高: 100%
最小高度: 100%
我怎么才能解决这个问题？
浏览 4提问于2016-05-03得票数 0
回答已采纳
我试着做一个简单的视图，有两个子视图-- v1，v2水平对齐，每个视图占屏幕宽度的50%。
为了实现这一点，我使用了以下代码：
<View style={{flexDirection: 'row'}}>
<View style={{flex:1}}>
<View style={{flex:1}}>
</View>
我也尝试过使用其他属性-- flexWrap、justifyContent。
然而，每次视图都会一个接一个地堆叠在一起，并且不会占据屏幕的50%。我做错了什么？
编辑:我正在使用的实际代码片段：
浏览 0提问于2016-01-14得票数 0
下面是我的错误代码，第一个"text1“是覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
浏览 0提问于2021-10-20得票数 1
2回答
我正在尝试创建一个包含两个div的行，第一个div占66%，第二个div占33%，两个div之间的间距相等。 我是否正确使用了flex: 1和flex: 2？ <div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div style={{ width: 300, height: 300, backgroundColor: 'white', flex: 2}}>
div 1
</div>
<div s
浏览 65提问于2020-10-12得票数 0
2回答
我有一个用Gatsby版本2制作的页面，我想在一个flexbox容器中用gatsby-image制作组件。当我删除display: flex;属性时，图像就会出现，当容器是flex容器时，图像就会消失。
当我在开发工具中查看Gatsby应用的CSS样式时，我尝试逐个取消选择属性。当我取消选择position: absolute;属性时，图像会出现，但它的大小或位置不正确。
我还尝试在容器上设置flex-direction: column;，这会使两个图像中的第二个图像出现。但是，我更希望这个值是row。
在图像上设置overflow: visible !important;未使图像显示。
im
浏览 40提问于2019-07-08得票数 12
回答已采纳
3回答
带有className Offer__Sidebar的div包含上面图像中显示的所有5个元素。"Offer__Sidebar“用于侧边栏，我希望侧边栏只占总水平空间的20%。因此，我使用了flex: 0.2，但它不起作用。
HTML代码
<div className="Section">
<div className="Offers">
<div className="Offer__Sidebar">
浏览 6提问于2021-10-25得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
