对齐框内的元素[重复]

Posted 2023-03-05

【中文标题】对齐框内的元素[重复]

【英文标题】：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 项目推到右侧。

非常感谢！这对我有帮助，很抱歉问了一个已经回答的问题！