对齐框内的元素

Question

我正在尝试对齐 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 设置为明确的长度不是一个选项，因为 "category description" 的内容是可变的。

Answer 1

那是因为您使用的是 flexbox，所以 float 被忽略，如规范中所述：

在Overview:

Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns.
在Flex Containers

float and clear have no effect on a flex item, and do not take it out-of-flow. However, the float property can still affect box generation by influencing the display property’s computed value.

以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 将弹性项目推向右侧：

.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>

对齐框内的元素

Aligning elements inside a box

css

css-float

flexbox