对齐框内的元素[重复]
Posted
技术标签:
【中文标题】对齐框内的元素[重复]【英文标题】:Aligning elements inside a box [duplicate] 【发布时间】:2016-04-12 18:35:56 【问题描述】:我正在尝试对齐 div 中的项目,我已经阅读了一些问题,但仍然有这个疑问。
我目前拥有的:
代码是
.wrapper
border: 1px solid black;
width: 50%;
display: flex;
align-items: center;
.image
border: 1px solid green;
.title
border: 1px solid blue;
margin-left: 1%;
p
border: 1px solid red;
float: right; /* Does not work */
<div class="wrapper">
<span class="image">
<img src="http://opae.a-superlab.com/forum/styles/art_air/imageset/forum_read.png">
</span>
<span class="title">Category Title</span>
<p>Category description</p>
</div>
类别描述的float: right
不起作用:(我希望它位于块的最右侧。
将margin-left
设置为显式长度不是一个选项,因为“类别描述”的内容是可变的。
【问题讨论】:
这个问题似乎是Right-aligning flex item? 和Can I use flexbox and float at the same time? 的混合体。 opae.a-superlab.com/forum/styles/art_air/imageset/…> 分类标题分类描述
它正在工作...只需添加边距来调整它。 @Oriol 请不要那么仓促,让我重新表述问题:|我想要这个问题的解决方案编辑——没关系,谢谢! 【参考方案1】:那是因为您使用的是 flexbox,所以 float
被忽略,如规范中所述:
在Overview:
Flex 布局表面上类似于块布局。它缺少很多 可以使用的更复杂的以文本或文档为中心的属性 在块布局中,例如floats和columns。
在Flex Containers
float
和clear
对 flex item 没有影响,并且 不要让它失去流动性。但是,float
属性可以 仍然通过影响display
来影响框的生成 属性的计算值。
在Flex Items的一个例子中
<div style="display:flex">
<!-- flex item: floated element; floating is ignored -->
<div id="item2" style="float: left;">float</div>
</div>
但是,正如Right-aligning flex item? 中所述,在 flexbox 中,您可以使用 margin-left: auto
将 flex 项推到右侧:
.wrapper
border: 1px solid black;
width: 50%;
display: flex;
align-items: center;
.image
border: 1px solid green;
.title
border: 1px solid blue;
margin-left: 1%;
p
border: 1px solid red;
margin-left: auto;
<div class="wrapper">
<span class="image">
<img src="http://opae.a-superlab.com/forum/styles/art_air/imageset/forum_read.png">
</span>
<span class="title">Category Title</span>
<p>Category description</p>
</div>
【讨论】:
好的,那么如何在不使用 flexbox 的情况下实现我想要的呢?我希望它看起来与代码的当前输出完全一样,除了类别描述移到最右边。 正如Right-aligning flex item? 中解释的那样,在 flexbox 中,您可以使用margin-left: auto
将 flex 项目推到右侧。
非常感谢!这对我有帮助,很抱歉问了一个已经回答的问题!以上是关于对齐框内的元素[重复]的主要内容,如果未能解决你的问题,请参考以下文章
CSS Safari 14 出现问题,当包含在弹性框内的网格中时,子元素的高度会爆炸