Css 将所有东西一个接一个地排列在左侧-除了右侧的最后一项_Css

Css 将所有东西一个接一个地排列在左侧-除了右侧的最后一项

css

Css 将所有东西一个接一个地排列在左侧-除了右侧的最后一项,css,Css,一种常见的布局是将内容放在左边，将元数据放在右边的某种形式的方框中。我想知道，如果没有两个单独的内部容器，是否有可能实现这一点，如下所示： <div class="topic"> <h2>Topic title</h2> <p>Lorem ipsum dorom</p> <p class="meta"> <span class="date"

一种常见的布局是将内容放在左边，将元数据放在右边的某种形式的方框中。我想知道，如果没有两个单独的内部容器，是否有可能实现这一点，如下所示：

<div class="topic">
  <h2>Topic title</h2>
  <p>Lorem ipsum dorom</p>
  <p class="meta">
    <span class="date">2 hours ago</span>
    <span class="author">author</span>
  </p>
</div>


题目
益智树

2小时前
作者

要求：

前面的所有内容。元数据应该很好地放在左边，元数据放在右边
应该考虑长标题
右侧的元数据应与父容器顶部对齐

我想不出用上面的DOM以流畅的方式（没有固定的宽度）实现这一点的方法

演示其外观：编辑：

似乎我误解了这个问题，使用正确的HTML还有其他方法可以做到这一点，但我将坚持使用网格方法

<div class="topic">
  <h2>Supports Long Title</h2>
  <p>Lorem ipsum dorom</p>
  <div class="meta">
    <span class="date">2 hours ago</span>
    <span class="author">author</span>
  </div>
</div>


支持长标题
益智树
2小时前
作者

干杯

实现这一效果的一种（公认的老派）方法是：

给父级
```
div
```
a
```
padding right
```
为侧边栏创建空间
使用
```
position:absolute
```
和
```
top
```
和
```
right
```
坐标定位侧栏

工作示例：

.topic{
位置：相对位置；
填充：12px 196px 12px 12px；
背景色：rgb（191191191191）；
}
梅塔先生{
位置：绝对位置；
排名：0；
右：0；
右边距：12px；
填充：12px；
宽度：160px；
背景色：rgb（95,95,95）；
}
.元跨度{
颜色：rgb（255、255、255）；
}


题目
益智树

2小时前
作者

在

.topic

上使用flexbox，在

.meta

div.topic>P:last of type{…}

上使用

很容易实现，通过绝对定位，它有可能溢出长标题，而不是保持“布局”@Dean-我不理解你所说的“溢出长标题”和“保留布局”。这不是使用所需的HTML。应将元数据分组。