对齐框内的元素[重复]

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

floatclear 对 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 项目推到右侧。 非常感谢!这对我有帮助,很抱歉问了一个已经回答的问题!

以上是关于对齐框内的元素[重复]的主要内容,如果未能解决你的问题,请参考以下文章

将 div 元素与容器底部对齐 [重复]

CSS Safari 14 出现问题,当包含在弹性框内的网格中时,子元素的高度会爆炸

在mindmanger中,怎么讲红框内的子主题快速对齐(除了一个一个手动对齐哦)

按矩形中心垂直对齐 SVG 内的矩形元素

如何将特定元素与列小部件内的左侧对齐

如何垂直对齐嵌套在无序列表中的锚元素内的文本