腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
2
回答
Flexbox -使页脚在任何时候都粘在页面底部?
、
我知道,这已经被问了1000次了,但是堆叠溢出的解决方案似乎对我没有用。 每个人都做像.container { height: 100vh; }这样的事情,而整个想法是在底部有页脚,如果页面的主要内容没有足够的内容来扩展。 父级以flex作为显示和column方向。儿童分别有flex-grow: 1和flex-shrink: 0。为什么不起作用?为什么页脚不在最底层?我遗漏了什么?我不知道身高、脚还是主,我想让主楼在任何时候都能占据所有的自由空间。 JSFiddle版本: * { border: solid 1px red; } html, body { height: 100%
浏览 4
提问于2022-09-04
得票数 0
2
回答
如何将挠曲盒的底部元素的含量确定为100%高的容器
、
、
如果我制作了一个包含两个子流和列流的挠曲盒,并将第二个子流设置为flex-grow 1,那么第二个子子将展开以填充该柔性盒。这行得通 (ps:不想用safari支持这个例子,所以使用Chrome或Firefox) * { box-sizing: border-box; } html, body { margin: 0; width: 100%; height: 100%; color: white; } #outer { display: flex; flex-flow: column; height: 100%; } #top { backgroun
浏览 1
提问于2015-10-14
得票数 6
回答已采纳
1
回答
不使用Bootstrap 4 flex进行包装
、
、
当我使用flex-base: 100%时,我希望有两列和几个块,它们包装到第二列中。下面是我想要的一个例子: .container1 { height: 50vh; width: 50vw; } .item1 { height: 10%; width: 70%; } .item2 { height: 10%; width: 28%; } .item3 { width: 2%; } .break-column { flex-basis: 100%; } .item4 { height: 10%; width: 70%; } <scri
浏览 4
提问于2021-02-01
得票数 0
1
回答
不填充父级高度的Flex项
、
我有一个装有儿童物品的容器: <div id="container"> <div className="item">1</div> <div className="item">2</div> <div className="item">3</div> <div className="item">4</div> </div> CSS #container {
浏览 3
提问于2021-02-10
得票数 0
回答已采纳
2
回答
防止弯曲项目超过父级高度,并使滚动条工作。
、
、
、
如何防止具有滚动条和flex:1的子div在Firefox中超过其父柔箱的高度?它在Chrome中工作正常。 CodePen链接(如果您喜欢它而不是堆栈溢出片段): 详细信息 我有一个固定高度的柔性容器。它有一个flex-direction:column设置,它包含多个儿童div,这些div将被垂直叠加。其中一个子div被赋予一个flex:1属性,而另一个则被赋予固定的高度。 我的期望是,带有flex:1属性的子div将展开以填充剩余的垂直空间。这如预期的那样起作用。 我还为子div提供了一个overflow-y:scroll属性,以便如果其子div中的内容超过其高度,滚动条就会出现。这在Ch
浏览 0
提问于2018-09-24
得票数 18
回答已采纳
1
回答
flex-grow在列布局中不工作
、
、
、
我正在尝试让views-cntnr占用views-cntnr和menubar div没有使用的任何空间。为了实现这一点,我将flex display设置为列方向。然后,我将views-cntnr的flex-grow属性设置为1。似乎没有做任何事情。 注意:不确定这是否重要,但我有一些嵌套的flex显示正在进行。 HTML <script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/boot
浏览 0
提问于2016-02-08
得票数 17
回答已采纳
2
回答
嵌入的iframe未扩展
、
我正在尝试嵌入一个页面,这样就可以在边上显示一个导航栏 我已经尝试了stackoverflow推荐的针对iframe的其他解决方案(高度100%,弹性增长等),但它就是不能增长并填满剩余的空间!我不确定为什么会发生这种情况,当我通过控制台检查元素时,所有元素似乎都被应用了 body { padding-top: 90px; } @media (min-width: 768px) { body { padding-top: 0; } } @media (min-width: 768px) { body { margin-right: 232px; } }
浏览 13
提问于2019-08-26
得票数 0
回答已采纳
2
回答
Bootstrap等高列
、
、
、
我正在尝试实现两列的高度相等。内容IRL是动态的。布局(桌面)普通列(每列宽度33%),在移动堆栈协议上。我尝试使用.row和'd-flex‘进行包装,但都不起作用。 这是一个codepen: 请帮帮忙,因为我还不了解Flexbox。 .ContractTemplateDetails { cursor: pointer; border: 1px solid #ccc; padding: 2rem !important; height: 100%; } .ContractTemplateDetails:hover { background-color: #e5
浏览 0
提问于2018-01-27
得票数 2
回答已采纳
2
回答
引导-子填充100%的父级,但不更大。
、
、
、
、
html,body, .container-fluid { height: 100%; border: 1px solid orange; } .page-header { padding-bottom: 2%; padding-top: 2%; } #icons { border: 1px solid red; } .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; border: 1px soli
浏览 2
提问于2017-08-15
得票数 0
3
回答
如何在保持高度的同时调整项目的水平和垂直尺寸
、
、
、
、
我的问题是: 我在一个容器里有3个容器,里面有内容。 我想让这些容器中的每一个填满任何剩余的空间,如果一个是垂直和水平移除的。 我在flex-flow: row wrap中使用了flexbox,当我们删除两个底部容器中的一个时,这个功能非常好。 然后,为了让它们垂直调整大小,我使用了“高度自动”属性,并且可以预见,容器元素将填充其容器的剩余高度。 <!DOCTYPE html> <html> <head> <style> div{border: 1px solid black} html, body{hei
浏览 5
提问于2016-02-12
得票数 1
回答已采纳
1
回答
设置父div获取高度作为子级。
、
在这里,我试图将parent height设置为儿童的身高,但有些地方失败了。 #parent { background-color: red; } #child { background: blue; } <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpk
浏览 4
提问于2022-09-27
得票数 -1
1
回答
用flexbox和Bootstrap卡填充高度
、
、
、
我有一个使用Bootstrap容器和卡的页面。我试图让.card-body填充整个屏幕的高度,但高度在内容结束后结束。这是一个演示问题的小提琴。Fiddle .page-container { min-height: 100vh; } .main-content { min-height: calc(100vh - 0px); -webkit-box-flex: 1; flex-grow: 1; } .container { width: 100%; } .card { display: flex; flex-direction: column; }
浏览 22
提问于2020-04-15
得票数 1
3
回答
当内部内容具有不同高度时,等高可伸缩项目
、
、
、
我需要具有相同高度的列,所以我使用flex (我使用bootstrap框架)。 我知道在附加的图片中可以看到flex work,但框的高度并不相同,因为一个文本比另一个文本少。 我希望类inner-div与col-md-4的高度相匹配。 有没有人能帮我调整一下高度,让它总是一样的? .col-md-4 { border: 1px solid black; } .row-eq-height { display: flex; } .inner-div { border: 1px solid red; } <div class="container&
浏览 0
提问于2016-06-28
得票数 4
2
回答
如何强制将flex项目放在页面底部?
、
、
、
这就是我想要的布局 目前它看起来是这样的 我可以通过指定高度来增加第二个框的大小。 .row-2 { height: 500px; } 当然还有比这更好的方法。 我还试着把最后一排盒子放到底部,但没有任何运气: .row-3 { margin-top: auto; } 我的flexbox如下所示: <div className="container"> <div className="row-1">1</div> <div className="row-2">2<
浏览 2
提问于2020-12-14
得票数 1
1
回答
ReactNative:如何使背景图像填充它应该用柔性盒覆盖的部分
、
、
我一直在试着得到一个图像来填充它应该填充的空间。然而,它只填补了空间的某一部分。结构如下: mainWrapper navBarWrapper 图像 buttonWrapper mainWrapper是一个具有flex: 1的视图,因此它覆盖了整个页面。navBarWrapper有一个flex: 1图像有flex: 7,backgroundColor:‘粉红色’看它的结尾,buttonWrapper有一个flex: 2.5,backgroundColor:‘backgroundColor’看它的结尾 在截图中,图像本身并没有完全填满粉红色的空间。 我的简化
浏览 4
提问于2017-03-05
得票数 0
2
回答
创建水平换行的垂直列表
、
、
、
、
尝试创建一个类似下面这样的列表: https://i.gyazo.com/e9dfcd50b50670d4c9e0be94a4013c59.png 我正在使用Bootstrap并尝试这样的代码,但不起作用: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGg
浏览 22
提问于2020-06-12
得票数 0
回答已采纳
2
回答
如何使孩子在flex中填写父母的所有可承受的高度
、
、
我有两个女儿,父母和孩子。 我要让孩子填补所有可用的父母身高。 但出于某种原因,我把这个垫子放在了底部。 只有当我使用身高105%用于儿童时,我才能移除它 但这显然不是最好的解决办法。 我试着使用align-items: stretch,但是它什么也没做。 <div style={{ width: 100%; height: 92%; display: flex; flex-direction: row; box-sizing: content-box; }} > <div style={{ height:
浏览 4
提问于2022-04-20
得票数 1
回答已采纳
1
回答
Slick Carousel Slider overriding : Flex对齐问题
、
、
、
、
这是我正式提出的第一个问题。我花了将近一天的时间试图弄清楚这一点,所以如果有人能帮助我,我将非常感激! 不管怎样,我试着在Bootstrap中使用slick的旋转木马,每当我使用类的“slick-slider”时,我也需要类的“card-group”,底部的“添加到购物车”按钮和上面的按钮对齐不正确。 <div class='slick-slider card-group'> 这是卡片组和卡片的代码片段: <section id="slick-slider" class="py-5 med-1"> <div
浏览 3
提问于2018-08-10
得票数 0
3
回答
只有当孩子需要时,css才能填充剩余高度。
、
、
我有一个内容和一个页脚面板。页脚有固定的大小,但内容可以是固定的,也可以填充剩余的高度,这取决于(宏大)子元素。如果任何子节点填充剩余高度,则内容面板也应填充剩余高度。这种填充儿童的深度可以是任意的(直接的儿童或10个嵌套的级别) 示例: var button = document.getElementById('child-switcher'); var child = document.getElementById('content-filler'); button.onclick = function() { if (child.style.displa
浏览 5
提问于2017-12-25
得票数 5
回答已采纳
3
回答
min-height导致填充被忽略
、
在将min-height添加到div之后,子元素在填充之外流动。下一个元素是height: 100%,我认为这与它有关。 html, body { height: 100%;} .card {height: 100%;} .card-header {min-height: 50px;} .card-block {height: 100%;} <link data-require="bootstrap@4.1.3" data-semver="4.1.3" rel="stylesheet" href="https://stackp
浏览 22
提问于2019-09-18
得票数 6
回答已采纳
3
回答
如何给伸缩物品100%的高度?
、
、
我有以下标记。footer-info类有一些样式,我希望每一列中的高度都相同,而不管文本有多少。 我不想在可能的情况下将样式应用于列类,而且如果可能的话,我也希望避免使用位置相对/绝对。有一个优雅的解决方案吗? 我想要的结果是让每个footer-info填充父行的高度(等高列)。 我把这个放到了jsfiddle中: .container-fluid { padding-right: 2rem; padding-left: 2rem; margin-left: auto; margin-right: auto; } .row { -webkit-box-sizing:
浏览 20
提问于2019-11-04
得票数 1
回答已采纳
1
回答
如何将图像设置在相同的底层(仅使用css而不是js)?
、
、
谢谢你提前的回复。 我知道te如何创建响应性产品网格,如果我所有的图片都有相同的高度和相同的标题长度,只使用css属性,比如flex display和flex-end align,但是当我对每个图像使用图像(多个高度)和标题(每个图像的长度不同)时,我得到了以下问题: HTML代码 <div class="imgContainer"> <div class="imgChild row-eq-height"> <div class="img-slider-parent">
浏览 0
提问于2016-10-29
得票数 3
1
回答
使柔性盒div垂直包装内容
、
我正试着把三个挠性盒div放在一起放在一起。 <div style="display: flex; flex-direction: row"> <div style="flex:1; border: 1px solid #ccc;">1<br />A<br />B<br />C<br />D<br />E</div> <div style="flex:1; border: 1px solid #ccc;">2</div>
浏览 3
提问于2016-01-15
得票数 3
回答已采纳
1
回答
将Wordpress图像缩放到Bootstrap内部的相同高度
、
、
、
、
我有引导集成Wordpress下划线模板。 我想要制作一个具有相同高度的图像的水平滚动容器。 我被困在一点上,我有可滚动的容器,但是图像的高度是不一样的; /*for example purposes*/ .example{ background:pink; } /*underscores style.css*/ img { height: auto; max-width: 100%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
浏览 2
提问于2022-02-20
得票数 0
回答已采纳
1
回答
在react中显示响应性全屏着陆页时出现问题
、
、
、
我用React Bootstrap设计了我的网站。但我一直面临的问题,使它的反应。我正在附上截图和我的网站下面的代码。 在这里,着陆页面的高度比需要的高得多。 APP.JSX import React from "react"; import MainNav from "./Navbar"; import Home from "./Home"; import About from "./About"; function App() { return ( <div> <MainNav
浏览 0
提问于2020-02-13
得票数 0
2
回答
为什么CSS百分比(%)高度应用于flex元素的孙子元素?
、
、
我正在尝试检查CSS的100%高度属性是如何工作的。但有一件事我不明白。 为什么在.flex-grand-child (Chrome)上100%的高度可以完美的工作?.flex-child是否有height属性?那么为什么它还能起作用呢? 这是 html, body { height: 100%; } .container { display: flex; flex-direction: column; height: 100%; } .flex-parent { flex: 1 0 auto; display: flex; } .flex-child {
浏览 0
提问于2020-05-22
得票数 4
1
回答
缩放<SVG>宽度到高度(父本的100%)
、
、
我试图创建一个带有引导5.0流体容器的网页模板(一个标题和一个容器,这样就不需要垂直滚动)。在这个容器中,我希望在一个svg中呈现一个D3映射,该映射将动态伸缩到其父容器的高度的100% (不管它的父容器当前的高度是什么),并相应地调整其宽度以保持高宽比。 我发现了一些样式,使我的容器总是缩放到保持视口高度,而不需要垂直滚动,包括在下面,但我不知道如何实例化我的svg只占用这个垂直空间,缩放水平和调整大小。 let path = d3.geoPath() let svg = d3.select("#map-svg") .attr("preserveAspect
浏览 1
提问于2022-01-12
得票数 0
回答已采纳
2
回答
仅将滚动添加到内容,而不是标题
、
、
、
我基本上有非常标准的两列布局: <div id="app"> <div class="left"> <div class="first"> <div class="header">Dynamic Items</div> <div class="scrollable"> <div id="items"> <div class="ite
浏览 0
提问于2019-01-18
得票数 3
2
回答
Bootstrap 4 Flexbox将屏幕分成4部分
、
、
、
如何使用bootstrap 4和flexbox将我的屏幕划分为4个具有完全相同的宽度和高度的部分。 每一个都应该有50%的宽度和高度。 它们也是响应式的(每个内容)。 到目前为止,我尝试了以下内容,但没有成功: <div id="app" class="flex-container"> <div class="flex-item" style="background-color:red"></div> <div class="flex-ite
浏览 3
提问于2018-10-11
得票数 0
2
回答
溢出,导致整个页面滚动。
、
、
、
、
我正在尝试创建一个不滚动的页面。页面上的某些子元素可以滚动,但我试图阻止整个页面滚动。我有一个非常嵌套的子元素,当溢出时,它会接收一个滚动条,但也会导致主文档增长和接收一个滚动条。 这是问题的核心,但还有几个嵌套级别可能是一个因素。 <div class="h-100 d-flex flex-column"> <div class="d-flex align-items-center justify-content-center bg-red" style="height: 7%"> </di
浏览 1
提问于2019-04-25
得票数 1
回答已采纳
1
回答
如何在bootstrap 4中让图像填满屏幕的左侧?
、
、
、
我正尝试在bootstrap中创建自定义登录页面。 在左边我想要我的图像,在右边我想我的形式,我需要它是响应性的,所以在某些屏幕尺寸上,图像很可能需要消失,因为我不想它变得扭曲。 我的问题是,图像没有完全显示出来,而是在表单结束时被“切断”。 这是我的html <div class="container-fluid"> <div class="row"> <div class="col-md-6 background_image"> </div>
浏览 0
提问于2020-04-23
得票数 1
2
回答
神秘的高度100%不起作用
、
有六个图像,它们应该显示在两行中(尽管实际上它们是12个,因为我使用了悬停效果)。问题是图像没有显示在两行上。如果我把它放在一个固定的高度上就好了。例如500px。但这就给Responsive带来了一个问题。 我已经尝试了上千个公式。显示:块、内联、自动等。但似乎没有什么能给出好的结果。 这里我留下了简化的代码,如果有人能告诉我什么是失败的。谢谢! CSS <style type="text/css"> html,body {height:100%; } .image-grid { display: -moz-flex; display: -we
浏览 1
提问于2015-12-28
得票数 2
1
回答
理解挠曲:用对齐项包装:拉伸
、
、
如果运行下面的代码段,可以看到flexbox container中两行的container是不同的。有人能解释一下吗? 如果您注释行A (=从flexbox项中移除显式height ),那么两行在height中都是相等的。我不明白为什么? 如果方便的话,是同一个片段的JSfiddle。 *{ color: blue; font-size: 22px; } .box1 { width: 50px; background-color: black; border: 1px solid blue; } .box2 { width: 50px; background-
浏览 0
提问于2018-07-25
得票数 4
回答已采纳
1
回答
试着让柔韧的物品保持同等的高度,但是柔韧的生长是行不通的。
、
不管有多少内容,我都想让蓝色的盒子保持等高。因此,我试图将flex-grow用于蓝色框。 请看一下这个。我试着使用flex: 1,就像其他问题一样,但是它不起作用。我怎样才能使蓝色盒子的高度相等呢? HTML <div class="practicespanel"> <div class="container"> <div class="practicecontent"> <h1>DUI Defense Attorney Douglas Herring</h1> <p>Our
浏览 0
提问于2015-10-14
得票数 1
回答已采纳
2
回答
如何在FLEX中缩放一个SkinnableContainer和他所有的孩子?
、
、
<s:SkinnableContainer styleName="top" width="1458" height="131" > <s:VGroup left="50" verticalAlign="middle" height="131" styleName="profile_info"> <s:Image source="@Embed(source='images/logo.p
浏览 2
提问于2014-01-29
得票数 0
4
回答
当flex-direction为'column‘时,CSS flex-basis不起作用
、
、
我的目标是使用flexbox创建一个两列布局,其中第一列有两行,第二列有一行,如下所示: 仅当容器的flex-direction为row时,在第三项上设置flex-basis: 100%才能获得所需的效果 将flex-direction更改为column会导致以下结果,除非显式设置了height,这在我的项目中是不可行的: 如果不显式设置容器的height,如何获取第一张图片? 。 body { display: flex; height: 100px; width: 100px; } .container { display: flex;
浏览 4
提问于2013-11-22
得票数 17
1
回答
引导4列没有达到100%的高度
、
、
我正在使用Bootstra4,我注意到我的列没有达到行高的100%。 我假设Bootstrap 4的一个特性是列高度总是与行高相同,如下面的工作示例所示: 出于某种原因,我似乎不能产生同样的结果。我试过使用: 对齐项-行上的拉伸类 高度: 100%在柱子上 flex: 1显示:flex和flex方向:列 我想知道是否有人能解释正确的设置方法,以确保引导4列达到100%的行高。 (请在整页中查看以获得准确的演示) .row { border: 1px solid green; } .our-research { padding: 40px 0; } .our-re
浏览 0
提问于2018-07-04
得票数 0
回答已采纳
1
回答
滚动元素,随着其他元素的增长,flex将其推开。
、
、
我正在尝试创建一个具有以下布局的页面: +-------------------------------------------------------+ | | | nav | | | +-----------------------------------------------
浏览 0
提问于2018-11-18
得票数 0
回答已采纳
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
3
回答
自举集列高度和间距
、
、
我想动态地填充这些块。实际上,会有一个for循环来发送数据。但是,我在使用引导4在不同屏幕大小时遇到了一些问题。当文本在较小的窗口大小上推到额外的行时,我希望列之间具有相同的高度(在最大高度限制内取最长的高度)。发行: 理想结果: 任何提示都将不胜感激! <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> &
浏览 0
提问于2018-12-06
得票数 0
回答已采纳
3
回答
当使用展开小部件时,没有可见的内容。
、
、
我试图在一个示例项目中使用扩展的小部件。我在列小部件中嵌入了一行作为子程序。在行中,我使用了带有.But属性的扩展小部件,在删除展开后,我无法在屏幕上看到任何内容,它可以工作。我试着把展开放在列前面,它也显示了同样的错误。这是我的密码:- import 'package:flutter/material.dart'; void main() => runApp( const MaterialApp(home: MyApp()) ); class MyApp extends StatefulWidget { const MyApp({Key? key}) :
浏览 10
提问于2022-01-01
得票数 0
回答已采纳
2
回答
为什么当我试图用CSS改变<div>的高度时,它的高度没有变化?
、
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}"> </head> <body> {%
浏览 9
提问于2022-07-21
得票数 0
2
回答
Bootstrap镜像未根据父级调整高度
、
、
、
我有一些带有图像的按钮。按钮内部的图像太大。当按钮的高度改变或者文本大小改变时,我想让图像通过button元素来调整大小。我使用的是Bootstrap-4类("img-fluid"),但它不能正常工作,因为图像高度没有变化。 我的HTML代码: <div class="order-type-buttons col-12 d-flex" aria-label="First group"> <button type="button" class="btn order-type-btn-blue col-4 d
浏览 6
提问于2018-12-07
得票数 0
6
回答
如何设置旅游卡的高度
、
、
我正在尝试添加一张带有vue和vuetify的卡片,它将占用我的容器中的空间,使用v-flex创建一个水平卡,其垂直行为方式是相同的。我试图添加一个100%的高度样式,使用填充高度,儿童弯曲等,但我无法得到大小的卡来填充容器。调整高度的正确方法是什么? 参考文献: <div id="app"> <v-app id="inspire"> <v-toolbar color="green" dark fixed app> <v-toolbar-title>My Applicatio
浏览 1
提问于2018-04-20
得票数 20
回答已采纳
4
回答
css柔性盒:所有元素的高度相同?
、
、
使用CSS和flexbox,我不明白如何给div "a“和"b”相同的高度。我需要b变得更高,以便与某人的身高相匹配。换句话说,灰色盒子应该和红色盒子一样高。 我的理解是,将flex:1设置为a和b就足够了,以便它们具有相同的高度。但事实并非如此。 我尝试将flex-basis:0设置为"a“和"b",但内容被截断。我不能截断a,我需要把b放大。 #cont1{ display:flex; flex-direction:column; } #a{ background-color:red; flex:1; } #b
浏览 4
提问于2015-11-15
得票数 7
回答已采纳
1
回答
嵌套Flexbox +图像
、
、
、
我的处境: 我建议从结果窗口弹出。 我有一个垂直的flex容器,它包含两个项目。第二个项目也是一个垂直的挠性容器。它包含几个项目,它们是水平的灵活容器。这些水平容器包含两个项目。其中一个项目包含一个图像,设置为高度:100%。另一项设置为填充剩余空间。 视觉表征 灰色=顶层垂直挠性集装箱 绿松石=固定项目 绿色=第二个垂直柔性集装箱 黄色=水平挠曲容器 red =包含图像的flex项 暗紫色=图像 洋红=指定用来填补空空间的挠性物品 期望:包含图像的项目缩小到包含高度:100%的图像,第二个图像扩展以填充空间。 实际结果:项目是图像的自然宽度,并且
浏览 1
提问于2017-10-04
得票数 0
1
回答
如何正确地安装标头
我有一个adminHeader.php, <div class="main_content"> <div style="width: 100%"> <div class="header" style="align-items: center;font-size: 17px;"> <a style=" text-decoration-line: none;">Dashboard</a>
浏览 9
提问于2022-06-09
得票数 0
1
回答
拉伸<canvas>以填充不带任何滚动条的flex项
、
、
、
、
我正在使用引导5,并试图设置一个嵌套的flex布局来填充窗口,其中一个flex项被一个“拉伸”的<canvas>填充(因此任何地方都没有滚动条)。 由于某些原因,使用w-100和h-100实用工具创建画布(相当于将CSS宽度和高度设置为100%)将在页面上创建一个垂直滚动条。我在网络上看到了许多类似的问题,但它们几乎都是针对flex-direction: row的,似乎不适用于我的column场景。我不知道这是否是Bootstrap中的一个bug,或者我只是误解了嵌套的flex容器和/或画布。 下面是一个复制问题的代码: 下面是HTML主体: <body class="
浏览 6
提问于2021-08-19
得票数 0
回答已采纳
1
回答
在柔性箱布局中,是否有交叉轴的“Flex-收缩:0”声明?
、
、
、
、
我希望防止flex容器中的元素在非flex-direction的维度中收缩。下面的示例将<article>元素并排放置在一行中。当可用的垂直空间减少时,这些元素不会强迫它们的flex容器显示滚动条;相反,内容会溢出元素边界。 屏幕1 -有足够的水平和垂直空间来显示所有内容: 屏幕截图2 -缩小的垂直空间将元素边框向上推高: 屏幕截图3 -垂直空间进一步减少,容器最终得到一个滚动条: 屏幕截图4 -如果没有flex-shrink:0,元素宽度(主挠度轴)也会减少: flex-shrink:0可以防止水平收缩,但如何防止元素垂直收缩? 给出<
浏览 2
提问于2015-03-18
得票数 7
1
回答
我怎样才能强迫每个图像在一个引导行是相同的高度?
、
、
、
我有三个图像在同一行,我希望他们的所有高度是相同的(纵横比保存)。 我试着让父容器保存图像(..carousel content-容器) 'display:flex;‘并给每个内部div一个“flex:(img的纵横比)”,但这似乎不起作用--也许是因为它干扰了Bootstrap列?有没有人知道一种不像黑客的方法? 任何在这方面的帮助将是非常感谢的!请参阅下面的图像链接来查看问题。 HTML (旋转木马部分): <section class="portfolio-section"> <div id="carouselExa
浏览 5
提问于2020-06-07
得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
Web自适应布局你需要知道的所有事儿
CSS3 Flexbox布局
给萌新的 Flexbox 简易入门教程
前端入门5-CSS弹性布局flex
微信小程序CSS之Flex布局
热门
标签
更多标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
活动推荐
运营活动
广告
关闭
领券