腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
2
回答
Flexbox消除两个子程序之间的列间隙
html
、
css
、
frontend
这是代码: .content { display: flex; justify-content: center; flex-direction: column; align-content: stretch; } <div class="content"> <h4>type</h4> <h4>exp</h4> </div> 看上去是这样的: ______________________ type exp ____
浏览 8
提问于2021-12-10
得票数 -1
回答已采纳
3
回答
如何使用两个独立子div的元素更改显示顺序?
html
、
css
HTML-结构如下所示: <div class="main-parent"> <div class="column-left"> <div class="1"> 1 </div> <div class="2"> 2 </div> </div> <div class="column-right">
浏览 2
提问于2020-02-26
得票数 0
回答已采纳
1
回答
在使用flex方向列时如何水平对齐div
html
、
css
、
flexbox
我有一个容器,它有一个表和一个div,其中display设置为flex,flex-direction设置为column。 我想使div中心水平对齐。这是代码 <style> .container { display: flex; flex-direction: column; border: 1px solid red; } .mytable { width: 100% } table, th, td { border: 1px solid b
浏览 0
提问于2018-04-11
得票数 5
2
回答
childs元素中父元素背景色的空白
html
、
css
、
overflow
、
hidden
我试图使父div -背景颜色,圆角和溢出隐藏起来,把里面的子div与背景色,但我看到小差距的父色。怎样才能解决这个问题呢?主要任务是不更改HTML 这里代码 .container { max-width: 300px; margin: 0 auto; } .parent { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 1rem; height: 100px; b
浏览 4
提问于2022-11-03
得票数 2
3
回答
柔韧的物品正在拉伸
html
、
css
如何避免flex列中的项伸长到全宽度?我希望它是原始大小的创造。 .myForm { display: flex; flex-direction: column; } <form class="myForm"> <input type="text" /> <input type="text" /> <button>Test</button> </form>
浏览 5
提问于2021-12-07
得票数 0
回答已采纳
3
回答
如何使挠曲盒生长以填充div的最大可用高度。
css
我试图让一个flex框的多个子元素增长,以填充max-height参数在flex-direction: column时设置的可用高度。这可以直观地与max-width和flex-direction: row一起工作,当我在指定的最大宽度内调整浏览器大小时,允许元素再流。下面是一些简单的html,考虑到我对flex-box的理解,它应该能工作: .child { background: rgb(255, 255, 255); border: 1px solid #999; font-weight: bold; text-align: center; flex-basis:
浏览 2
提问于2020-07-27
得票数 2
回答已采纳
2
回答
为什么我要显示:块项目,以便它们对齐彼此在一个柔性盒?
html
、
css
、
forms
、
flexbox
下面的CSS代码应该使表单的每一项都位于一个列中,例如,在另一个列下面,但是除非我添加代码,否则它不能工作: input { display:block; } 为什么会发生这种情况,我如何仅使用#flex规则块来实现这一点? * { box-sizing: border-box; margin: 0; padding:0 } #flex { display: flex; flex-direction: column; flex-wrap: wrap;
浏览 10
提问于2022-01-14
得票数 1
回答已采纳
1
回答
有一排向不同方向移动的flex容器
css
、
flexbox
我正在尝试创建一个包含两个不同区域的flex容器。左边将有两个flex盒子堆叠在一起,而右边(box 1)将是另一个flex容器,其中有多个列形式的盒子。当我现在创建它的时候,它都被放在角落里,看起来像这样。 .practice-flex-container { display: flex; } .practice-flex-container div { border: 1px #ccc solid; padding: 10px } .practice-left-flex-container { flex-direction: column; } .practice
浏览 0
提问于2018-12-13
得票数 1
2
回答
当将文本添加到其中一个div时,如何不让两个div之间的差距发生变化?
css
、
reactjs
我在flex-direction row中放置了两个div和一个gap of 70px,如图所示: 在上面的图片中,我们可以看到日期是8/12/22,但是当我们将日期更改为12/12/22时,divs(即日期和步骤计数)之间的差距会随着日期的增加而略有增加。这给了一个非常糟糕的用户体验。 以下是代码: JS <div className="DataAreaParent"> <div className="DataParent"> <span id="XAxisData" className=
浏览 3
提问于2022-06-29
得票数 1
1
回答
父网格的子类div没有填充所有可用的空间。
html
、
css
、
flexbox
、
css-grid
我有这样的设置,在这个设置中,我需要表单、按钮和选择框来水平地占据所有可用空间。在小屏幕上,所有的工作都是按预期进行的。 然而,当我在更大的屏幕中测试它时,所有的空间都没有被子元素填充。 我尝试了网格和flex->row两种方法,结果是相同的。如何修正我的代码,即使在更大的大小子元素填充所有可用的空间水平与它们之间的相等空间? .grand-parent { margin-top: 2%; left: 0%; position: relative; display: flex; flex-direction: row; } .parent { m
浏览 3
提问于2022-07-22
得票数 1
回答已采纳
2
回答
使用柔性箱的共享标头两列布局中的拉伸列
html
、
css
、
flexbox
我正在使用flexbox创建带有标题行的两列布局。 * { box-sizing: border-box; position: relative; } .container { border: 2px solid gray; display: flex; flex-wrap: wrap; height: 300px; } .header { flex-basis: 100%; border: 2px solid magenta; height: 50px; line-height: 50px; text-align: center; } .
浏览 1
提问于2018-06-14
得票数 2
回答已采纳
1
回答
布局间隙/边距中心两个最后一个有弹性包装的元素。
css
、
flexbox
我有一个布局问题,我想把最后两个元素集中在一行上。首先,我尝试了网格,但找不到合适的解决方案,所以我找到了一种用“弹性包装”来解决它的方法,它看起来很不错。 我现在面临的问题是差距/差距。当我将宽度设置为33,33%时,我找不到任何好的解决方案。 还有其他好办法解决这个问题吗?我有点卡住了,已经看了几个小时了:) (见布局附件图片) #container { display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; } @media only screen and (m
浏览 3
提问于2022-08-08
得票数 0
回答已采纳
2
回答
使用Flex -将两个子div更改为以100%宽度堆叠在一起
css
、
flexbox
我希望两个子div向左对齐,并以1000px的特定浏览器媒体宽度堆叠在彼此的100%宽度上。 我在父级中有两个子div,它们可以正确显示: .relationFRAME { background: #151515; color: #FFF; display: flex; } .relationLEFT { width: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .relationRIGHT { float: right; flex: 1; } 我
浏览 62
提问于2019-09-14
得票数 0
3
回答
不同的flex容器并排
html
、
css
、
flexbox
我正在尝试让它成为两个并排的半宽包装器。目前,包装器确实占据了一半的空间,但并没有出现在一边。display:flex似乎占据了整个宽度,并留下了边上未使用的空间作为边距。 .wrapper { display: flex; flex-direction: column; width: 40%; border: 1px solid black; } <div class="wrapper"> <div class="title">Test Title</div> <div class="
浏览 49
提问于2019-11-19
得票数 1
回答已采纳
1
回答
使左div高度紧而不影响父母中的其他div。
html
、
css
、
bootstrap-4
不知道该怎么命名,所以如果它让人困惑的话,很抱歉。基本上,我正在创建一个选项卡模块,其中.right div始终是相同的高度。 .left div包含链接/选项卡,但我希望这个div的高度与.right不匹配。 例如,在下面的方法中,我希望带有文本"Content“的div是自动的(匹配文本高度)。 方法: .parent { display: flex; flex-direction: column; } .flex-row{ display: flex; flex-direction: row; } .left, .right { flex-basis:
浏览 0
提问于2019-08-19
得票数 0
1
回答
挠性盒与奥雷利亚不能正常工作(Webpack首发工具包)
css
、
flexbox
、
aurelia
考虑到使用flexbox的一些非常基本的html,我可以使用一个页眉、页脚和一个内容区域来实现一个屏幕,它可以填充所有的空格: <html> <body style="display:flex;flex-direction:column;flex-grow:1"> <div style="display:flex;flex-direction:row">Header</div> <div style="display:flex;flex-direction:row;fle
浏览 3
提问于2017-09-26
得票数 1
回答已采纳
1
回答
当使用flex (列)作为父级时,自动边距缩小子div
html
、
css
、
r
、
flexbox
我试图使用margin 0 auto将父div内的一个div (在列模式下显示flex )中的一个div水平地居中。当我这样做时,内部div就会缩小到其内容的大小。有人能解释一下为什么会发生这种情况吗?如何解决这个问题? <div class="container"> <div class="mydiv"> CENTER THIS DIV </div> </div> CSS .container{ background-color: brown; heig
浏览 2
提问于2020-09-16
得票数 0
回答已采纳
2
回答
我如何根据最高的孩子的身高来设定父母的身高?
html
、
css
、
sass
、
flexbox
我有一行和两列(本例中有一列为flex )。我希望将行的高度设置为最高子元素的高度。在没有显式设置行高度的情况下,我在这样做时遇到了问题。 .row { background: yellow; } .column1 { float: left; width: 50%; } .column2 { float: left; width: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; background: aqua; }
浏览 0
提问于2018-05-14
得票数 2
回答已采纳
2
回答
改变孩子的位置?
html
、
css
我想让A坐在顶部,B坐在中间,C坐在底部。 <div class="container"> <div class="a">A</div> <div class="sub-container"> <div class="b">B</div> <div class="c">C</div> </div> </div> CSS: .containe
浏览 7
提问于2015-10-22
得票数 0
3
回答
为什么挠曲箱不工作响应设计与灵活的方向?
css
、
flexbox
我有我的投资组合,但我不擅长CSS。 我正在使用Flexbox来设计桌面和移动设备,但是它不能工作. 就像我想要的那样,使用flex-direction: column: div父级代码: display: flex; justify-content:center; align-items:center; background-color:#C4C4C4; min-height: 100vh; flex-direction: column; 但是当我输入响应时,它保持如下: div父母以外的元素..。 代码是一样的,只改变背景色. background-color: red
浏览 2
提问于2018-09-16
得票数 2
回答已采纳
1
回答
使用具有窄间隙的Flexbox将列表拆分为3个组
html
、
css
、
flexbox
我正在试着把列表分成三个一组。 我有像这样的东西 .card { height: 200px; display: flex; } .details-container { flex: 1 1 60%; display: flex; flex-direction: column; } .items { display: flex; flex-direction: column; flex-wrap: wrap; text-align: cen
浏览 1
提问于2018-09-06
得票数 0
回答已采纳
4
回答
只在flex项目中块元素?
css
、
flexbox
显然,在一个flex项目容器中只能有块元素(内联、内联块、浮点不工作)?这很奇怪,除非我做错了,否则似乎没有用? 这是笔: .fill-height-or-more { min-height: 100%; display: flex; flex-direction: column; } .fill-height-or-more > div { flex: 1; display: flex; flex-direction: column; justify-content: center; } 您可能必须提高预览窗格的高度,以使柔性盒工作。 为了清晰起见,我说的不
浏览 7
提问于2014-11-23
得票数 16
回答已采纳
1
回答
为什么嵌套的div内容在缩小,我没有声明在div容器之间出现空间?
css
、
flexbox
、
frontend
、
css-grid
、
web-frontend
以下是我的html文件: <header > <div id="ballo"> <div id="balloresize"> <img src="images/BAL.png" alt="" id="balloicresize"> <h2>Black Anthem LTD</h2> </div> </div> &l
浏览 0
提问于2021-08-20
得票数 0
回答已采纳
2
回答
即使屏幕大小匹配,也不应用媒体查询。
html
、
css
、
twitter-bootstrap
我有一个问题:当屏幕大小合适时(在本例中,低于768‘t),则不应用媒体查询。 以下是我的元素: <div class="container d-flex flex-column flex-md-row "> ... </div> 以下是课程: @media (min-width: 768px) { .flex-md-row { flex-direction: row; } } .flex-column { flex-direction: column; } 根据Chrome Webdev工具,它们是如何应
浏览 4
提问于2022-05-01
得票数 1
1
回答
未出现内联的flex容器中的粗体文本
html
、
css
、
flexbox
我有使用flex的div容器。我的弹性儿童容器里有一个大胆的衰老。 示例 Lorem ipsum dolor与之同坐,是一种非常重要的植物。在卵黄中有一种新的特征。诺兰的前庭奥西。 然而,当我创建我的flex容器时,它并没有将粗体文本内联。它在普通文本和粗体文本之间创建一个块。 示例 Lorem ipsum dolor 同坐,圣洁的精灵。在卵黄中有一种新的特征。诺兰的前庭奥西。 我已经将我的flex容器设置如下: .flexparent { display: flex; flex-direction: row; justifty-content: center; flex-wr
浏览 4
提问于2016-09-01
得票数 9
回答已采纳
2
回答
强制元素始终位于DIV中
html
、
css
在web开发中,有一件事我似乎一直在抗争,那就是将东西放在div元素中。我经常遇到这样的问题:我有一个div包装器列表,其中包含更多的div和内容,最终,其中一个会耗尽,并在样式方面造成噩梦。请允许我举个例子。 如果检查该元素,您会注意到banner-content div并没有包装所有内容。图像和span元素超出了它的范围,即使icon-wrapper内容确实(再次)包装了所有内容。我相信我知道这个问题的答案( img高度设置为100%)。 现在这似乎不是什么大问题,但当试图将事物与更多的内容和表单以及响应式设计对齐时,它变得有点疯狂。感觉就像我添加了一些繁琐的代码,以使所有的形式都很好。
浏览 18
提问于2019-06-05
得票数 0
1
回答
角分量破坏其子元素的挠曲盒高度信息。
html
、
angular
、
css
、
flexbox
我有一个柔性盒父容器,它的flex-grow为我的包含div元素提供了尽可能多的高度。当然,这个div元素的子元素具有height:100%。这个很好用。 <div style="display:flex; flex-direction:column;"> <div style="flex-grow:1;background:green;" id="parentContainer"> <div style="height:100%;overflow:auto;background:red
浏览 0
提问于2018-02-17
得票数 1
回答已采纳
1
回答
Div在React.js中不使用100%的高度
javascript
、
reactjs
、
styled-components
我使用React.js + next.js +样式组件来开发一个应用程序的前端。在我的布局文件中,我有一个包装器,使另外两个div (LeftContainer和RightContainer)并排在一起,但是没有一个div占据页面高度的100%。我附加了布局类和下面的样式。 export default function Layout({ children }) { return ( <> <Wrapper> <LeftContainer> a
浏览 6
提问于2021-03-11
得票数 0
回答已采纳
1
回答
使用flexbox将子div拆分为列
javascript
、
html
、
css
、
flexbox
我正在努力实现列的布局,如下图所示。我需要 麦克斯。3列 麦克斯。一个列中有11个子列,然后为第12个子列启动一个新列 每个奇数行的亮背景,每个偶数行的暗背景。 如果没有足够的子列组成新列,则其他列不应填充水平空间,如下所示: .parent { display: flex; flex-wrap: wrap; justify-content: space-between; /*flex-direction: column; height: calc(20px * 11);*/ } .parent div { flex: 1 0
浏览 1
提问于2017-06-26
得票数 7
回答已采纳
2
回答
只适用于三种元素中的两种
javascript
、
html
、
css
、
flexbox
我有3个独立的元素,它们都在一个容器/包装器中。我有灵活的应用,所以图像和文字是并排的。不过,我希望在使用Flex的同时,将"Scroll Down“div放在其他两个元素下面。是否有任何flex属性仅在前两个元素上应用Flex? 图像: <section class="home-section"> <div class="home-wrapper"> <div class="home-column"> <d
浏览 0
提问于2020-10-29
得票数 0
1
回答
如何消除网格间隙/填充物?
css
、
css-grid
我想把身体分成两个部分,没有任何垫子或间隙。但当我用grid除以身体时。 它显示了一些差距,即使我将grid-gap设置为0。它应该显示左是整个蓝色,右边是整个白色。 如何消除这些空白? body { width: 100%; height: 100vh; background-color: #5FAAD9; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 0; gap: 0; } #Record { width:
浏览 8
提问于2022-06-12
得票数 0
回答已采纳
2
回答
如何在柔性盒中拉伸边栏,同时有页脚和未填充的主要内容?
html
、
css
、
flexbox
这是截图: 我要右边的侧边栏伸展页脚。这是我的标记: <header> Fixed position header </header> <main> <article> <form method="post" class="row"> <div class="col-l-2 padding-20"> Table here </div>
浏览 2
提问于2015-08-29
得票数 0
回答已采纳
2
回答
如何对齐两个挠性盒元素?
html
、
css
、
layout
、
flexbox
我对柔性箱有个问题。我试图对齐两个元素:一个与容器顶部对齐,另一个与中心对齐。大多数柔性箱示例使用的是三个元素,而不是两个元素。所以我尝试了我自己的解决方案。 #main { display: flex; flex: 1; flex-direction: column; justify-content: space-between; height: 100px; background-color: #dfdfdf; } #box1 { display: flex; justify-content: flex-end; background-color:
浏览 4
提问于2018-11-22
得票数 0
回答已采纳
1
回答
绝对定位父级,其子级不继承宽度。
html
、
css
、
flexbox
、
absolute
我有一个flex框,它将根据其内部的内容按列增长;该框的宽度应该适合内容。我必须把这个盒子放在一个父容器中,这个容器是绝对定位在页面上的。 如果这样做的话,父容器并不是获取子容器的动态宽度,而是坚持它的初始宽度,并且子容器的内容已经溢出。 可用代码: .parent { color: white; background: blue; margin: auto; padding: 1em; position: absolute; left: 10px; top: 100px; } .child { background-color: green; displa
浏览 5
提问于2022-02-02
得票数 0
回答已采纳
3
回答
中心带挠曲箱
html
、
css
、
flexbox
我有这样的代码: body { margin: 0; } ul { margin: 0; padding: 0; list-style-type: none; position: fixed; top: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; } li { margin: 0; padding: 0; width: 100%; background-color: lightblue; flex-grow: 1; } a {
浏览 4
提问于2017-03-21
得票数 2
回答已采纳
1
回答
子高度%不会跟随父容器
css
、
flexbox
我不明白为什么在这段代码中,子容器的高度不会与父容器的高度相同。有什么想法吗?两个容器都是<div> .parent { display: flex; align-items: center; justify-content: space-between; border-radius: 1rem; background-color: #f5f5f5; min-height: 6rem; margin-bottom: 0.8rem; width: 100%; overflow: hidden; } .child
浏览 2
提问于2021-07-22
得票数 0
6
回答
使flex元素忽略子元素
css
、
html
、
flexbox
有没有可能让flex元素忽略一个子元素,这样它的大小就不会影响其他元素? 例如,我有一个带有display: flex的包装器。它有页眉、内容和页脚。 <div class="wrapper"> <header></header> <article></article> <footer></footer> </div> 我希望包装器忽略header标记( header将固定在窗口的顶部)。文章将被设置为flex: 1,这样它就占据了剩余的空间,强制页脚位于页面
浏览 3
提问于2016-10-04
得票数 59
3
回答
Safari中超过其高度的Flexbox儿童
html
、
css
、
safari
、
flexbox
我在Safari遇到了一个奇怪的Flexbox高度问题。 在Chrome中,center div位于body div内100%的高度。 在Safari中,center div超过其容器的100%的高度;它看起来需要在它之上的hero元素的50%。 有人见过这个吗? body, html { height: 100%; width: 100%; padding: 0; margin: 0; } #container { height: 100%; background-color: #EEE; flex: 1; flex-direction: column;
浏览 4
提问于2017-09-06
得票数 2
回答已采纳
2
回答
带列的内联挠性容器.同级内弯容器的反向冲击对齐
html
、
css
、
flexbox
在我的代码中,两个内联flex坐在一起。 在第一个内联flex中,flex项被设置为flex-direction:column-reverse。然而,这会影响其兄弟姐妹的内联柔性div的位置水平。我的意思是,当flex设置为flex-direction: column时,同级flex的位置不同。我不明白为什么会这样。 我的理解是,flex-direction只控制其子级的位置,即flex项,而对其兄弟级flex没有任何影响。但很明显,这似乎是错误的。有人能解释原因吗?谢谢! .flex { display: inline-flex; border: solid; margin:
浏览 3
提问于2016-06-10
得票数 1
1
回答
如何用引导带消除ReactJS中这个奇怪的虚线间隙
javascript
、
html
、
css
、
reactjs
、
next.js
我正在用NextJS - Bootstrap构建一个应用程序,当我检查elements选项卡时,我看到屏幕顶部有一个奇怪的虚空。没有一个元素有边距/填充顶,根本就不能点击。 似乎d-flex类(flex元素)的元素有一个奇怪的虚空。但是当我检查元素时,这个flex元素没有任何填充或边距。 在上面的图片中,有一个图片在顶部。默认情况下,它应该位于屏幕的顶部。但不知何故,这里有一个虚空的缺口。我不能在图像上使用负margin-top值,因为所有分辨率都不一样,这会破坏应用程序的响应能力。 我对顶部的几乎每个组件都尝试了margin: 0 and padding: 0 (包装器div、图像
浏览 11
提问于2022-07-30
得票数 0
回答已采纳
3
回答
flex-box,保持第一行未包装
html
、
css
、
flexbox
我有一个容器,在那里我需要内部块互相跟踪,表现得像漂浮的。我不能使用浮点,因为布局应该在分辨率更改后重新安排。目前,我需要两个块1 (70%宽度)和2块(30%)驻留在同一行,但是第二个块移动到下一行: HTML: <section> <div>Header</div> <div>SideRight</div> <div>Bottom line</div> </section> CSS body * { box-sizing: border-box; } section {
浏览 0
提问于2018-11-21
得票数 2
回答已采纳
1
回答
Css弹性div,底部有元数据到相同的高度。
html
、
css
、
flexbox
我有一个包含两个部分的框,带有图像的标题和底部的内容分开为两个部分,文本和动作按钮。 问题是,文字有时大,有时小,我需要所有的盒子伸展到相同的高度,根据更大的盒子。 这是我对flex的尝试,但由于某些原因,它不起作用。 .wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .wrapper > di
浏览 5
提问于2015-09-20
得票数 0
回答已采纳
2
回答
具有弹性方向列的父容器和具有弹性方向行的子容器
css
我有一个标题元素,我想要显示flex列,这样我就可以垂直居中.container分区。这工作得很好。然后我需要.container中的项目在1200px上以均匀的间距排成一行。你不能在flex容器中做flex容器去不同的方向吗?请看下面我的css: header { height: 50px; display: flex; flex-direction: column; justify-content: center; } .container { max-width: 1200px; margin: 0 auto; padding:
浏览 10
提问于2020-03-14
得票数 2
回答已采纳
1
回答
css -根据父母数量的均等选择每个元素( CSS或更少但没有JS )
html
、
css
、
flexbox
、
css-selectors
、
less
我知道我可能没有很好地解释标题中的问题。 因此,我正在编写样式表,其中有两个自定义元素( <grid>和<box>),它们是柔性盒,在flex-direction中是备用的,如下所示: <box> <!-- flex-direction: column --> <grid> <!-- flex-direction: row --> <box></box> <!-- flex-direction: column -->
浏览 0
提问于2020-11-06
得票数 0
5
回答
Chrome / Safari不填充100%高的弯曲父母
css
、
google-chrome
、
webkit
、
flexbox
我想要一个具有特定高度的垂直菜单。 每个子代必须填写父级的高度,并具有中间对齐的文本。 孩子的数量是随机的,所以我必须使用动态值。 Div .container包含任意数量的子级(.item),它们总是必须填充父级的高度。为了达到这个目的,我使用了柔性盒。 为了制作与中间对齐的文本链接,我使用了display: table-cell技术。但是使用表格显示需要使用100%的高度。 我的问题是.item-inner { height: 100% }没有在webkit (Chrome)上工作。 这个问题有解决办法吗? 还是有一种不同的技术使所有.item用垂直对中的文本填充父级的高度?
浏览 6
提问于2015-11-10
得票数 295
回答已采纳
1
回答
使用CSS使HTML中的图像居中
html
、
css
、
centering
我的图片并不都居中。它们大致从中间开始,然后向右侧和侧面移动,在左侧留下一个空间。 我正在努力使我所有的图像居中整齐。我有3个连续的图像,但在左侧有一个巨大的差距,所以图像大致从中心开始,然后向右移动。我希望所有的图像都正确居中。下面是我的html代码: .row { display: flex; } .column { flex: 33.33%; padding: 5px; } <div class="row"> <div class="column"> <img src="https://i.
浏览 0
提问于2020-05-18
得票数 0
1
回答
Flexbox项的高度与其内容无关
css
、
flexbox
我知道这听起来像在flexbox上的另一个问题,这个问题在其他地方得到了解决,但我无法从google或堆叠溢出的现有帖子中找到解决方案。 问题很简单。 我有3个子div在一个父div中,其中一个包含一个大于其最终大小的内容。我希望每个孩子都是其父母的1/3,而不管其内容如何。 这是小提琴: 下面是HTML: <div class="parent"> <div class="child red"> <div class="content">1</div> </div&g
浏览 4
提问于2015-07-27
得票数 3
回答已采纳
2
回答
如何在flex列中包装文本子列并保持列修复的宽度
html
、
css
、
flexbox
、
word-wrap
我创建了一个包含两个列的flex行,每个列都有flex:1,这意味着这些列将除以两个宽度相等的部分。 HTML : <div class="row"> <div class="columnLeft"> <p>columnLeft</p> </div> <div class="columnRight"> <p>columnRight</p> </div> CSS : .row { display: flex; flex-dir
浏览 1
提问于2021-09-27
得票数 0
回答已采纳
2
回答
如何影响HTML5进度元素的最小宽度?
html
、
css
、
flexbox
有一个,它处理具有由size参数确定的固有最小宽度的input元素。 我试图设计一个布局,其中有一个带有inline-flex的flex-direction: column块,如下所示: .item { border: 1px solid gray; display: inline-flex; flex-direction: column; } <div> <div class="item"> short <progress /> </div> <div class="it
浏览 1
提问于2019-01-30
得票数 2
回答已采纳
1
回答
Bulma/Flexbox页脚不粘在页面底部
css
、
flexbox
、
bulma
我正在用Bulma作为我的CSS框架,用Vue和Laravel制作一个应用程序。我想要一个页脚,即使内容不‘推’它在页面的底部。目前,我在我的自定义CSS中包含了以下内容: body { display: flex; min-height: 100vh; flex-direction: column; } #app{ flex:1; } #app是我的默认刀片模板中的div,我的应用程序被注入其中: <body> <div id="app"> <index></index> <
浏览 5
提问于2020-07-26
得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
给萌新的 Flexbox 简易入门教程
微信小程序CSS之Flex布局
Flex 布局教程:语法篇
页面生命周期,模块化,数据绑定,view 组件……
基于 Flexbox和CSS Grid 的高效布局
热门
标签
更多标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
活动推荐
运营活动
广告
关闭
领券