腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
2
回答
Flexbox不适用于div之间的空间。
css
、
flexbox
我正在应用Flexbox的概念,但是我在这里遇到了一些困难,我应用了display: flex;并将方向应用到了列中。 现在,由于主轴是列,所以我把justify-content作为中间的空格,但是这个间隔不是用来在navbar和section-main与footer之间腾出空间的。 .page-container { display: flex; flex-direction: column; justify-content: space-between; } .navbar { display: flex; flex-direction: row; justi
浏览 1
提问于2019-07-21
得票数 5
回答已采纳
2
回答
如何使用flex在div之间放置均匀的空间?
html
、
css
、
flexbox
这是我想用display:flex实现的那种位置。我希望text1出现在顶部,text3出现在底部,text2出现在中间。 然而,我得到的最终结果是: 我期望align-self能够将顶部和底部的div拉向两端。 我错过了什么? 这是 HTML: <div class=container> <div class='logo-container hidden-xs'> <span>LOGO on the side</span> </div> <div class='
浏览 7
提问于2016-01-04
得票数 2
回答已采纳
3
回答
如何使用flex将图像与div底部对齐?
html
、
css
、
flexbox
我有一个父容器,里面有一些子元素,比如基于内容具有不同高度的段落。我尝试使用justify-self: flex-end将图像与垂直轴的底部对齐,这样就不会影响父容器中的其他项,并将图像放在父容器的底部,但它不起作用。 但是,当我使用justify-content: flex-end时,它可以工作并将整个内容推到底部,但我只希望图像与底部对齐。我做错了什么?我该如何解决这个问题? .parent-container { display: flex; } .parent-container > div { display: flex; flex-directio
浏览 32
提问于2018-12-13
得票数 0
回答已采纳
1
回答
如何在HTML中将多个图像放在页面中心?
html
、
css
、
center
我想在页面的中心放置4个方框,即它们应该垂直居中并水平放置,一个方框应该在最左边,一个在最右边,左边的应该水平放置在极端的中间。我知道以前有人问过这样的问题,但我不明白解决方案的确切逻辑。有没有人能对此给出一个恰当的解释?非常感谢。这是HTML代码- .cards div{ height: 200px; width: 200px; float: left; text-align: center; margin-left: 100px; } .card_1{ background-color: green; } .card_2{ bac
浏览 0
提问于2017-08-12
得票数 0
2
回答
使用Flexbox的全内容高度和对齐卡
css
、
flexbox
、
angular-material
我正在努力调整项目在角4w/角材料使用Flexbox。我想完成一个布局,如附件1所示的布局,其中第一张卡在顶部,第二张卡在组件内容的底部。组件本身应该占据屏幕上其余的高度(设备高度减去工具栏高度)。 附件2显示了我到目前为止所取得的成就。下面的HTML标记和CSS显示了附件2后面的代码。 有人能告诉我做这件事的正确方法吗?我不想混乱的固定位置或其他什么,我想实现一个解决方案,是兼容的角度材料,不影响其他组件的布局。 提前感谢! 附件#1: 附件2: HomeComponent的HTML标记: <div id="home-content">
浏览 3
提问于2017-10-07
得票数 0
回答已采纳
1
回答
如何使抽屉底部与抽屉宽度相同的div粘合材料UI?
html
、
css
、
react-material
我用Drawer做了一个右手边的<Drawer/>,我想要一个<div>是贴在<Drawer />的底部,同时,<div>的宽度也会和<Drawer />一样。 预期结果: 这就是我试图取得上述成果的原因: const useStyles = makeStyles({ list: { // <-- this set the width of Drawer width: 500, }, bottomContainer: { position: "fixed", bot
浏览 2
提问于2020-08-16
得票数 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
回答
为什么justify-content空格-什么都不做?
html
、
css
、
flexbox
我正在尝试使用justify-content: space-between将top-nav和bot-nav部门垂直分开。然而,它并没有做任何事情。有人能指出我做错了什么吗? @import url(https://fonts.googleapis.com/css?family=Rock+Salt); html { font-family: 'Rock Salt', cursive; } .flex-container { display: flex; } header { width: 300px; height: 100vh; position: f
浏览 0
提问于2015-12-28
得票数 3
回答已采纳
2
回答
Flexbox包装-对最后一行的不同对齐方式
html
、
css
、
flexbox
我正在使用flex框对齐两个项目的左和右的容器,而垂直中心对齐他们。这里有一个非常简单的例子,说明我正在努力实现的目标。 HTML: <div class="container"> <div class="first"></div> <div class="second"></div> </div> CSS: .container { width:100%; display: flex; flex-direction: row;
浏览 0
提问于2014-11-17
得票数 12
回答已采纳
2
回答
使用React和css,页脚不会停留在页面底部
css
、
reactjs
当页面的内容很短时,我页面的页脚会继续向上移动。请知道怎么解决这个问题吗?我试过使用位置:绝对,左:0和底部:0。 Footer.js function Footer() { return ( <div className="footer-container"> <div class="footer-links"> <div className="footer-link-wrapper"> <div class="footer-link-
浏览 16
提问于2022-04-27
得票数 -1
2
回答
在flexbox中对齐到底部
html
、
css
、
flexbox
我有一个容器,可以根据内容动态改变高度。对于给定行中的所有容器,底部文本都应该固定在底部,而不考虑每个容器中的内容。 .flex-list { display: flex; flex-direction: column; } .flex-list .flex-row { display: flex; margin-bottom: 20px; } .flex-list .flex-row .flex-item-wrapper { margin-right: 20px; width: 100%; background-color: yellow; } .flex-l
浏览 1
提问于2016-07-28
得票数 2
回答已采纳
3
回答
如何强迫一个div在一定大小后滚动?
html
、
css
The Fiddle 这个小提琴清楚地解释了这个问题: (编辑:修正了断小提琴)。 问题 我有一个容器div,里面有3个div。 顶部和中部的高度是动态的。底盘是固定的。 一旦中间div扩展到足够大,我希望它是可滚动的。 代码片段 基本结构: <div id='container'> <div id='top'>Top (dynamic) content</div> <div id='middle'>Middle (dynamic) content</div> &
浏览 0
提问于2015-01-25
得票数 1
回答已采纳
2
回答
设置flexbox图像之间距离的更好方法
html
、
css
、
flexbox
虽然我已经使用bootstrap很容易地解决了这个问题,但我希望习惯flex-box模型和html5。我有3个图像要显示在一行(没有换行),图像之间留有空格。下面是我的html: <article> <figure> <picture> <img src="images_srcset/desert-dolphin-medium.jpg" alt="Dolphin art"> </picture> <figcaption>DESERT-BOTTLE-D
浏览 12
提问于2017-02-11
得票数 0
3
回答
将div移到导航栏的右侧
html
、
css
、
reactjs
**我想将className Navbar_icon的div移到导航栏的右侧。Navbar_icon包含搜索、帮助、登录。我希望将className Navbar_icon的div移到导航栏的右侧。Navbar_icon包含搜索、帮助、登录。**当前导航栏图片:< ? REACT COMPONENT JSX CODE : <div className="Navbar"> <h1 className="logo">eat24/7</h1>
浏览 41
提问于2021-10-21
得票数 0
2
回答
为什么内联/内联网格在内容可编辑中的行为不与内联一致?
html
、
css
当我使用显示:内联-flex;或显示:内联网格;时,似乎添加了一些“空格”,或者进行了某种额外的聚焦计算。我不知道到底发生了什么。当使用箭头键在一个内容可见的div中导航时,插入符号会被卡住,就好像它在聚焦于一个不同的元素或其他什么东西一样。有人知道原因吗?如果是这样的话,无论如何防止这种行为(不使用JavaScript来处理事件)? 考虑以下两个可满足的div之间的差异: (使用箭头键导航时,插入符号在"Hello“和"World”之间“卡住”) <div contenteditable="true"><span style="d
浏览 2
提问于2020-09-08
得票数 5
3
回答
如何在边框中对齐顶部和底部的物品?
html
、
css
、
flexbox
、
sidebar
我基本上想要一个类似于Visual代码中的Sidebar的边栏。上面有按钮,底部也有两个按钮。我做了一个边栏,但我只能定位所有的项目在顶部或底部的边栏,但我要两者。我希望3个项目在顶部和2个项目在底部。 这是我的CSS: .sidebarleft { background-color: rgb(25, 20, 26); display: flex; flex-direction: column; flex: 0 0 50px; } .sidebarleft-button { display: flex; justify-content: center; align
浏览 4
提问于2022-04-16
得票数 0
回答已采纳
1
回答
如何将导航栏向左对齐并使内容显示在右侧...无需使用任何框架,如bootstrap或顺风
html
、
css
我应该在不使用任何框架的情况下完成这个挑战,只使用HTML和CSS。我对如何将屏幕左侧的导航项目和内容与右侧对齐,以及内容底部的后续图像和图像div不应占据导航容器的方式感到震惊。 这就是输出在桌面上的外观 ?
浏览 48
提问于2021-08-14
得票数 0
3
回答
CSS:为什么我的"Flex项目“不能在绝对定位的div中获得100%的高度?
html
、
css
、
css-position
我有以下标记和css: <div class="container"> <div class="textContainer"> <div class="textWrapper"> <div class="itemOne"> Item one </div> <div class="itemTwo"> Item two </div> </div> </div> </di
浏览 9
提问于2022-04-19
得票数 0
1
回答
将一项推送到其父项的底部,而不重叠?
html
、
css
、
alignment
我有一个元素,至少在整个视口垂直延伸(最小高度100 of )。这个元素有两个childs,一个菜单项(基本上是一个格式化的链接列表)和另一个元素。 我希望将后一个元素推到父元素的底部,而不重叠菜单,跨分辨率更改。 目前,我使用的位置绝对解决方案。但事实证明,"red“元素可以在某些配置中重叠菜单。 HTML & CSS代码: * { margin: 0; } .parentContainer { min-height: 100vh; background-color: yellow; position: relative; } .pushBottom {
浏览 3
提问于2016-09-25
得票数 4
回答已采纳
2
回答
如何使用引导将表格单元格内容与图像垂直对齐?
html
、
css
、
twitter-bootstrap
我有一张有点复杂的桌子,看上去像这样 <tr class='row-eq-height'> <td><img/><div with text></td> <td><img/><div with text></td> <td><img/><div with text></td> </tr> 但是图片有不同的大小,所以我给它们添加了max-width: 300px。现在看起来就像 image | image
浏览 3
提问于2016-11-04
得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
5分钟掌握Styled Components实用技巧
分布式世界中的设计
html5基础知识点总结
底部导航设计的黄金法则
几种常见的 CSS 布局
热门
标签
更多标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
活动推荐
运营活动
广告
关闭
领券